Comments (6)
Can anyone confirm that issue?
from datetimepicker.
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.
from datetimepicker.
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?
from datetimepicker.
Im also having this issue, its a pretty big fail and so far proving to be really hard to fix.
from datetimepicker.
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.
from datetimepicker.
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.
from datetimepicker.
Related Issues (20)
- highlighted dates setting to null does not remove highlighted dates HOT 1
- Disable specific times in a specific day HOT 2
- Looking for work pleasing older women
- How can I change color settings
- Manual Input for time instead of picker HOT 1
- Appended divs when the page is opened (performance)
- select same time with multiple dates
- enterliketab
- how to preselect/ highlight the next possible date and time instead of today?
- If defaultDate is used, all the allowTimes are disabled
- format with 12h time format (format: m/d/Y h:i A) HOT 4
- Custom highlighted dates
- A white mask appears when selected on an iOS device
- SetDate
- Sev1 Accessibilty bugs, Please looking for solution on these reporetd accessibility bugs.
- input width
- Completely broken now? HOT 1
- If the user selects 31st, in a month and if that date does not exist in the next or previous month or on the UI of the selected month, it skips over that next or previous month
- How to use this on Websites Like DTC
- datetimepicker problem in adminLTE template HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from datetimepicker.