使用 jQuery DateTimePicker 禁用特定日期的特定时间

Question

我正在尝试使用 jQuery DateTimePicker 禁用特定日期的特定时间，如下所示：

jQuery('#datetimepicker').datetimepicker({
    disabledDates: ['27/04/2022 14:00'],
    format:'d/m/Y H:i'
});

但是，这不起作用。我可以只禁用每天的特定时间，或者禁用特定日期。

Answer 1

那是因为 jQuery 插件 DateTimePicker 的“disabledDates”只接受和禁用日期。 https://xdsoft.net/jqplugins/datetimepicker/

似乎没有用于禁用特定时间的选项，您可以只启用特定时间 https://xdsoft.net/jqplugins/datetimepicker/#allowTimes

jQuery('#datetimepicker').datetimepicker({
 datepicker:false,
 allowTimes:[
  '01:00', '02:00', '03:00', 
  '04:00', ... , '15:00', '60:00'
 ]
});

如果您想继续使用 jQuery DateTimePicker，您必须为其编写自己的函数例如

jQuery('#datetimepicker').datetimepicker({
    format:'d.m.Y H:i',
    timepicker: true,
    lang: 'en',
    onGenerate:function(ct,$i){
           //some function here to disable certain times
          });
      }
    }
});

或者您可以使用 Bootstrap 日期选择器，它有一个选项可以完全按照您的意愿执行 https://getdatepicker.com/4/Options/#endisabledhours

Answer 2

试试这个Reference

$(function () {

    var disabledDate = ['2020-07-14', '2020-07-15','2020-07-16'];
       $('#datetimepickerDemo').datetimepicker({
      disabledDates: disabledDate
     });
});

Answer 3

好吧，我实际上设法自己解决了这个问题。我正在使用 PHP，但您实际上可以只使用任何多维数组并 JSON 对其进行编码。

$times[]=[
    '2022-04-28'=>[
        'hour' => 10,
        'minute' => 30
    ]
];
$times[]=[
    '2022-04-28'=>[
        'hour' => 11,
        'minute' => 15
    ]
];
$times[]=[
    '2022-04-29'=>[
        'hour' => 13,
        'minute' => 30
    ]
];

$dates=json_encode($times);

获得日期和时间列表后，您可以使用 onGenerate() 函数遍历日期并向特定时间添加禁用的 class。

jQuery('#datetimepicker').datetimepicker({
    lang:'en',
    format:'Y-m-d H:i',
    formatDate:'Y-m-d',
    step:15,
    onGenerate: function(ct, $i){
        var date=moment(ct).format('Y-MM-D');
        var datesArray=<?echo $dates;?>;

        $.each(datesArray, function(i, dates){
            if(date in dates){
                var times=dates[date];
                $.each(times, function(index, time){
                    var hour=times['hour'];
                    var minute=times['minute'];
                    var $object=$('[data-hour="' + hour + '"][data-minute="' + minute + '"]');
                    $object.addClass('xdsoft_disabled');
                });
            }
        });
    }
});

请注意： 您需要为数组和 jQuery 函数使用完全相同的日期格式。此外，我的步骤设置为 15 分钟增量。所以这只会禁用那个确切的步骤。

使用 jQuery DateTimePicker 禁用特定日期的特定时间

Disable specific times on a specific date using jQuery DateTimePicker

javascript

jquery

datetimepicker