xdan
Display bug with "allowTimes: []" - values hidden in scroll view
If you dynamically change allowTimes: to set of time with less than 6 items - those items are hidden and to show them, you need to click "down scrollbar".
If there are 6 or more items - list is displayed correctly. Also if list is initialized with less then 6 items - it works fine... This situation accurs only when allowTimes is changed after first onShow:
http://jsfiddle.net/konieckropka/sLe94/2/
Yes, i can confirm this is an issue. (btw. Your fiddle will never load your example)
I reinitialize my options when i change date in order because not all times can be choosen for each date.
When you change the first time to fewer that 6 items, the scrollbar does not move.
When you change again, the scrollbar goes away, and the items are moved to the bottom.
If you want to use this for booking purposes, this is a major issue. You need to be able to change the time that can be chosen when changing dates.
Until it is fixed, a workaround could be to destroy your DateTimePicker and then reload it.
Workaround 1: Tried to test this and ran into destroy problems. The destroy method does not clean up the child elements as exspected, so i wrapped the datetime in a container like this:
When i Changed date I removed all child elements, added the datetime element again and then did a Init again. Damt ugly, but it works: function initDaytimePicker3(date) {
date.setHours(12);
date.setMinutes(30);
datetimepickerOptions.value = date;
datetimepickerOptions.allowTimes = ['12:30','13:00'];
$('#datetimecontainer').empty();
$('#datetimecontainer').append('<input type="text" id="datetimepicker"/>');
$('#datetimepicker').datetimepicker(datetimepickerOptions);
}
This will also set the chosen dato to the first in the array. I know you need to set it from the array and the array should be created from a server and so on, but this i only for testing.
Workaraund 2: Reload the page when date is changed (hell no). That would do the trick to, but who would want to do that?
Im also having this issue, its a pretty big fail and so far proving to be really hard to fix.
Found a better temporary solution.
After changing the allowed times just change the css of the position of the times back to the top.
setTimeout(function(){
$(".xdsoft_time_variant").css({"margin-top": 0});
}, 10)
I had to put it in a setTimeout because the position of the times were getting set after the onSelectDate method finished running. (I think)
But this works and its pretty easy, you can still scroll afterwards.
I know this is ancient, but still relevant.
For future Google warriors, try this after you've dynamically changed the allowTimes:
setTimeout(() => datetimepicker.trigger('afterOpen.xdsoft'), 20);
Example:
onSelectDate: async function (date) {
timePicked = false;
const slots = await ctl.getTimeSlots(date.toISOString().split('T')[0]);
if (!slots || !slots.length) {
$('.xdsoft_time_variant').empty();
} else {
this.setOptions({
allowTimes: slots,
});
}
setTimeout(() => this.trigger('afterOpen.xdsoft'), 20);
},
It will reset the custom scroll logic.
