I am developing a Material form and have a md-datepicker input field that is showing Invalid Date on load instead of its placeholder:
When clicking on the drop down, the calendar starts all the way back in July 1934, which is less than ideal to say the least:
My code is pretty straight forward:
<div ng-switch-when="glide_date">
<md-input-container>
<label style="font-size: 130%; white-space: normal;" for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-datepicker id = {{element.section_element_name}} ng-model="element.answer" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
</div>
If I highlight and delete "Invalid Date", then my placeholder shows up correctly and the calendar drop down resets to the correct month.
Any ideas on how to correct this?
Related
OVERVIEW:
We are using this plugin -- bootstrap-datetimejs (https://github.com/Eonasdan/bootstrap-datetimepicker). And I have it setup to show the time only
$(".timePicker").datetimepicker({
format: 'LT'
});
We are using ractivejs for our javascript library and my html goes like this
<label for="apptEndTime">End Time</label>
<div class="timePicker">
<input name="apptEndTime" id="apptEndTime" class="form-control date" type="text" value="{{apptEndTime}}" />
</div>
<label>Duration (mins)</label>
<input type="number" class="form-control" value="{{duration}}" id="duration" />
so apptEndTime is binded to ractive object data apptEndTime, and so does the duration. In my code, I made it that if the duration increases, it will also update the value of apptEndTime data. It successfully updated and displayed the apptEndTime.
PROBLEM:
Though it successfully updated and displayed the apptEndTime, when I click the clock icon of the datetimepicker, it still shows the previous time. As you can see on the screenshot below, it already displayed as 11:58 PM but when I click the clock icon, it still shows as 11:57 PM
QUESTION:
Is there a way that when I updated the value of apptEndTime, the time on the time selection menu (when the clock icon is clicked) will also gets updated?
I've already tried googling for day regarding this, but I can't seem to find the right solution. Also tried checking the documentation but can't find any related information
Ok my teammate was able to answer this question. He just added this line of code
$('input[name=appEndTime]').closest('.timePicker').data("DateTimePicker").date(appointmentObj.apptEndTime);
Where:
$('input[name=appEndTime]') is the affected input field
closest('.timePicker'). The '.timePicker' here is the name of your datetimepicker class/id when you initialize datetimepicker
data("DateTimePicker"). You just follow this, because all functions should be accessed via data("DateTimePicker") as mentioned on the plugin page:
https://getdatepicker.com/4/Functions/
date(appointmentObj.apptEndTime). date is the function name (though it is not found on the list of functions from their page :( ). And appointmentObj.apptEndTime is value that I want to set on the menu
I have a form which contain a date picker and it works as expected except the current date is not selected.
When I open the calendar it shows as follows
But I need the current date focused when ever I open the .date picker as follows
Add customTodayClass to the bsConfig and use css to change the background color of the date.
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker
[bsConfig]="{'customTodayClass': 'today'}"
/>
Add CSS for today class like below.
.today{
background-color: #DCDCDC
}
I am using the double-binding of the clrDate, which allows me to load a Javascript Date object. However, I need to trigger an event every time the user changes the date, either types in a new one or uses the calendar.
I've tried (click), (change), (ngModelChange), (blur) - but for some reason none of them seem to trigger.
<label for="modelDate" class="clr-control-label" >Model Date:</label>
<input clrDate type="date" [(clrDate)]="selectedModelDate" (ngModelChange)="loadModel(false)" >
How should I capture the change within the Date Picker?
You can do it in two ways.
2-way Binding
In this stackblitz, notice that before the date picker is interaced with, if you click the button then the value of date1 is undefined. After you select a date and click the button it has the value set in the date picker. This is typical 2-way binding in Angular.
<section>
<button class="btn btn-primary" (click)="logDate1()">
Log Date Value for 2-way binding
</button>
<label for="date1" class="clr-control-label" > Date1:</label>
<input type="date" [(clrDate)]="date1" />
</section>
De-sugarized Syntax
This might be what you are after. It's almost the same as the above example but we seperate or de-sugarize the 2-way binding so that it gets set with [clrDate]=date2. Notice that it fires an event clrDateChange that can be tied into with the logChnage($event). That will get fired whenever the internal value of the date picker changes (e.g user selects a date) and you can do whatever you want with it's value in the logChange function. This is 2-way binding de-sugarized.
<section>
<h4>De-sugarized syntax</h4>
<label for="date2" class="clr-control-label" > Date1:</label>
<input type="date" [clrDate]="date2" (clrDateChange)="logChange($event)"/>
</section>
I have a form that is using the calendar/date selection tool within Ektron, but when users select the current date (or any date, for that matter), it gives an error saying that you need to select a date in the past.
We haven't tooled around in the code for this form, but it almost sounds like a validation issue.
Here's the code, as is, from Ektron.
<p align="center" style="text-align: left;">Date program was presented:
<ektdesignns_calendar title="Date presented" id="Date_presented" onblur="design_validate_xpath('number(translate(.,\'-\',\'\')) <= number(translate($currentDate,\'-\',\'\'))',this,'Date in the past (required)');" ektdesignns_name="Date_presented" ektdesignns_caption="Date presented" ektdesignns_invalidmsg="Date in the past (required)" ektdesignns_validate="xpath:number(translate(.,'-','')) <= number(translate($currentDate,'-',''))" ektdesignns_basetype="calendar" ektdesignns_datatype="date" ektdesignns_validation="datePast-req" name="Date_presented">
<input type="text" size="30" readonly="readonly" unselectable="on" />
<img width="16" height="16" class="design_fieldbutton" alt="Select date" src="[skinpath]btncalendar.gif" unselectable="on" /></ektdesignns_calendar></p>
My knowledge on validation is limited, but it looks like it's parsing the date as an integer. Is it possible to add a day (+1) to the current date so that it interprets any day as valid as long as it's not in the future?
I guess this is a HTML form as opposed to a Smart form?
If so, have you checked the validation settings on the calendar field? If you edit the form, right-click on the field and choose Field Properties you will get the properties window. Go to the Validation tab and check the setting in the Validation drop down.
There are options for ensuring the date is in the past or the future. Perhaps one of these options has been set?
I'm using Watir WebDriver with Firefox.
Here are two asserts for the same element. The first works, but not the second:
assert_match(/Please add user to GMT/, #browser.small(:class, "error").text)
assert_match(/Please add user to GMT/, #browser.div(:class, "eight mobile-three columns").small(:class, "error").text)
I need the second assert to work, because there are 8 error messages on the page, which are presented if the user does not populate 8 mandatory fields. All 8 errors have the identical HTML. So, I need to be able to step down from the parent.
Here is the HTML:
<div class="eight mobile-three columns">
<a id="btnAddUserToGMT" class="success radius button expand error" onclick="AddUserToGMT();" data-reveal-id="addToGMT" href="#"> … </a>
<small class="error" style="margin-top:0px;">
Please add user to GMT
</small>
</div>
Here is the error message:
Watir::Exception::UnknownObjectException: unable to locate element, using {:class=>"error", :tag_name=>"small"}
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir-webdriver/elements/element.rb:490:in `assert_exists'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir-webdriver/elements/element.rb:85:in `text'
C:/Documents and Settings/Asserts_01.rb:22:in `testBasic'
The complaint for the second assert is:
unable to locate element, using {:class=>"error", :tag_name=>"small"}
And yet that same using was OK for the first assert.
Problem solved.
After discussion with the developer, it appears that by some unusual manipulation of automatically generated HTML, the text of the error message appears at its correct location on the page. But the assertion must be based on a different tag, which is specified at some completely different position on the page.
For example, I was trying to assert on this code at the correct position:
<small class="error" style="margin-top:0px;">
Gender is required
</small
Even unique xPath generated by FirePath failed to find this.
What I should have asserted on was a HIDDEN tag on a completely different part of the page.
<input id="errorMsgGenderID" name="errorMsgGenderID" type="hidden" value="Gender is required" />
There were several such tags for each mandatory field that was not populated, all bunched together on the same line. They were all "input" tags, which puzzled me.