jQuery Date 和 timepicker 在特定日期的不同时间

Question

im using date and timepicker for a reservation form and i need your help. http://xdsoft.net/jqplugins/datetimepicker/ <- source code where i got it from

i would like to set a specific time period only on sunday. so every other day the 'allowtimes' is from 18:30 tot 23:15 but on sunday its 12:30 till 22:00

this is de code i use

    $('#datum').datetimepicker({
    lang:'nl',
     i18n:{
      de:{
       months:[
        'Januari','Februair','Maart','April',
        'Me','Juni','Juli','Augustus',
        'September','Oktober','November','December',
       ],
       dayOfWeek:[
        "Zo.", "Ma", "Di", "Wo", 
        "Do", "Vr", "Za.",
       ]
      }
     },
    dayOfWeekStart: 1,
    minDate: 0,
    formatTime:'H:i',
    formatDate:'d.m.Y',
    minTime:'18:30',
    maxTime:'23:15',
    defaultTime:'18:30',
    onSelectTime: function(){  },
    allowTimes:['18:30','18:45','19:00','19:15','19:30','19:45','20:00','20:15','20:30','20:45','21:00','21:15','21:30','21:45','22:00','22:15','22:30','22:45','23:00','23:15'],
    beforeShowDay: function(date) {

        var day = date.getDay();
        return [(day == 0 || day >4 ), ""]; // Sunday or after Wednesday.
    }
});

thnx in advance, any help would be much appreciated

Answer 1

Not sure if you found a solution but posting anyway in case someone else needs help:

For Sundays and Saturdays we want shorter work hours.

var datePickerTime = function(currentDateTime) {
    // 'this' is jquery object datetimepicker
    var day = currentDateTime.getDay();
    if (day === 0 || day === 6) {
        this.setOptions({
            allowTimes: ["09:00", "10:00", "11:00", "12:00"]
        });
    } else {
        this.setOptions({
            allowTimes: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00"]
        });
    }
};

$('#txtCallDate').datetimepicker({
    minDate: '0',        
    minDateTime: dt,
    onChangeDateTime: datePickerTime
});

Answer 2

I believe you have to set the time range in the constructor and in the callback for date change. And I believe the correct callback is onSelectDate rather than onChangeDateTime - using the latter will create flickering and a reset of the time selection widget as it is scrolled (but nevertheless, thanks to @WillemNicolaas for pointing me in the right direction). The logic below shows weekday hours of 9AM-7PM and weekend hours of 11AM-7PM, which was what was wanted in my case.

d = new Date(); 
weekendTimes = [
        '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00'
           ]; 
weekdayTimes = [
        '9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00'
           ]; 


if ((d.getDay() == 6) || (d.getDay() == 0)) { 
   times = weekendTimes; 
} else {
   times = weekdayTimes; 
}
var datePickerTime = function(currentDateTime) {
   // 'this' is jquery object datetimepicker
   var day = currentDateTime.getDay();
   if (day === 0 || day === 6) {
       this.setOptions({
           allowTimes: weekendTimes 
       });
   } else {
       this.setOptions({
           allowTimes: weekdayTimes 
       });
   }
};
jQuery('input[name="order_delivery_date"]').datetimepicker({
    inline:true,
    minDate:0,
    onSelectDate: datePickerTime,
    defaultDate: d, 
    allowTimes: times, 
    formatTime:'g:i A'
});