I was working with an igDateEditor() and was getting valueChanged() events firing at incorrect times, such as when a user focused and blurred the date editor control, but never changed the value. I found out that there was a difference in value when getting the igDateEditor("value") at different times.
If you set the value of igDateEditor to a Date object, then query the value, you get the original Date object value you set it to, but if you focus and blur the igDateEditor then query the value, you get a value that is then formatted according to the igDateEditor option "dateInputFormat". If dateInputFormat is "date", the value of igDateEditor("value") is stripped of the time, even when the user never changed the value, but simply focused and unfocused the control.
I have included a code sample below:
function log(message) {
alert(message);
}
$(function () {
var dp = $("#datePicker");
var initDate = new Date(1423779102730-0500); //2015-02-12 17:11:42
dp.igDateEditor({
dataMode: 'date',
dateDisplayFormat: 'date',
dateInputFormat: 'date'
});
// if control is untouched by the user, we get the full-formatted, original value back
dp.igDateEditor("value", initDate);
log(dp.igDateEditor("value"));
// until the user focuses and unfocuses the control, then the
// value is formatted depending on the dateInputFormat
dp.focus();
dp.blur();
This gives us two different values, though the value was never manually changed:
Thu Feb 12 2015 17:11:42 GMT-0500 (Eastern Standard Time)Thu Feb 12 2015 00:00:00 GMT-0500 (Eastern Standard Time)
Can you verify this is the intended functionality? This scenario is kind of odd, and I've had to essentially wrap some of the Ignite UI functions and implement value formatting myself to avoid the valueChanged() event.
Thanks.
Thank you very much for the followup and clarification!
I had already implemented our own workaround by wrapping some of the igDateEditor functionality in our own input control classes before submitting this question - I just wanted to be sure that what I was seeing was the intention.
Our issue is due to the legacy data in the database. Though we only require a date or certain fields, some data in the database does include a full timestamp.
As for your suggestions, I considered using the dateInputFormat of "dateTime", but because the regional settings' default dateTimePattern does not include seconds, we were still getting an onChange event, as the dateTime input values were stripped to "00" seconds. Rather than fussing with having to modify all regional dateTimePattern values, I wrapped the method to set the igDateEditor value and pre-formatted all date/dateTime inputs before calling it.
I appreciate the detailed response and hope this may help others.
Thank you.
Hello rehemann,
The valueChanged can be raised on lost focus or on spin events. The expected behavior is this event to fire only when there is an actual value change. For example if you enter a date, blur, focus - enter editing and reenter the same date, valueChanged should not be fired (Or anywhere in between).
However, in this particular case you are experiencing it is to be considered expected. The reason for valueChanged firing is that there is a change happening in the editor’s point view.
This is because dateInputFormat is set to date and not dateTime. Using date, when entering new date it is expected there will not be any time fragment inputted by the user and it is automatically set as 00:00:00. In other words, when focusing the editor, the old time fragment is the one set at the initialization, and the new one is automatically set to 00:00:00. It could of course not be obvious for the user as dateInputFormat is set to date.
If dateTime input format is used instead, the editor will not make any changes to the time fragment and persist the initial one, even the changes made are to the date portion only. If it an appropriate option for you using DateTime format, I suggest just using this approach.
In case the above is not an option, in order to persist the time portion, I suggest doing it manually. For example handling valueChanging event and canceling the event if there is no change to the date fragment.
Another approach could be to implement manual persistence for the time.
For reference:dataMode- Note: that "date" is used as default.dateDisplayFormat- If value is not set, then the dateInputFormat is used automaticallydateInputFormat - "date": the datePattern member of regional option is used
Please let me know how my suggestions work for you.