I have a DatePicker defined as shown below to allow entering a time as well as a date. If I modify the time and then open the dropdown calendar, the time reverts back to whatever it was.
For example, if I programmatically set the datetime to 1/1/2016 3:00 PM, then change the time to 4:00 PM, as soon as I display the calendar the time changes back to 3:00 PM.
$("#dte").igDatePicker({ placeHolder: "Select Date...", readOnly: false, dateInputFormat: "dateTime", dateDisplayFormat: "dateTime", focusOnDropDownOpen: true, mode: "editable", required: true, value: null, tabIndex: 20,
});
Hello,
I am unable to replicate this behavior utilizing the selectDate method to programmatically change the hour of the igDatePicker. I am attaching the sample I utilized for testing this behavior. Feel free to modify it if you feel it is not an accurate representation of what you are trying to achieve.
Are you binding to any events that could potentially be setting the value of the igDatePicker after expanding the calendar (dropDownListOpened, dropDownListOpening)?
I was able to duplicate the problem using the file you provided. I've attached a screenshot to show what I did.
1. I clicked the "change hour to 3:00 AM" button
2. I clicked on the date and change the 3 to a 4.
3. Do not do anything to change the focus from the igDatePicker. Immediately click the down arrow to display the calendar. The time changes back to 3 AM.
The problem doesn't occur if you click off of the igDatePicker field first, then click the down arrow for the calendar. Losing focus must cause the value to be saved somewhere, but if you don't change focus before clicking the down arrow the value reverts back.
Thanks for the detailed info on how to replicate this behavior as I was able to reproduce in the sample I provided.
What causes this behavior is that the text value is not being committed to the igDatePicker unless the user places focus on another element in the page (click outside the igDatePicker, press the enter key). In my attached sample, I work around this by swapping the newly rendered values during the dropDownListOpened event with the old values. Note that since this is quite literally a swap, it is visible to the user that the value is changing thus making this solution not entirely ideal.
Thanks for your assistance.
I made the following adjustments to the 2 event handlers and everything works as desired. There is no visible "swapping". I set dataChangedText to ui.text rather than ui.oldText. I also updated the value in the dropDownListOpening event rather than the dropDownListOpened event.
$("#datePicker").on("igdatepickertextchanged", function(evt, ui) { dateChangedText = ui.text; });
$("#datePicker").on("igdatepickerdropdownlistopening", function() { if(dateChangedText) $("#datePicker").igDatePicker("selectDate", dateChangedText); dateChangedText = null; });