如何在 jQuery datetimepicker 中禁用选定的日期和时间

Posted 2023-05-08

【中文标题】如何在 jQuery datetimepicker 中禁用选定的日期和时间

【英文标题】：How to disable selected date and time in jQuery datetimepicker

【发布时间】：2017-03-15 05:23:11

【问题描述】：

我正在使用 jQuery datetimepicker。添加日期选择器以预订日期和时间。这是它应该如何工作的。

从周日到周六启用日期选择器，周三除外，时间是上午 8 点到下午 6 点 周二可用时间为上午 8 点至下午 2 点

当有人预订的日期不应该提供给其他人时，我正在尝试使用 disabledDates 但不起作用。

这是脚本

function DisableWed(date) 

    var day = date.getDay();
    // If day == 1 then it is Wednesday
    if (day == 3) 

    return [false] ; 

     else  

    return [true] ;
    
  
$('#pickdate').datetimepicker(
    format: 'Y-m-d H:s',
    beforeShowDay: DisableWed,
    minDate: 0,
    disabledDates: ['2016-11-03 09:00'],
    allowTimes: ['08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00']
);

正如http://xdsoft.net/jqplugins/datetimepicker/ minTime 和 disabledDates 所描述的，似乎对我不起作用。

【问题讨论】：

你能加个小提琴吗

感谢@SusheelSingh 的回复:) 这是我的小提琴jsfiddle.net/matatitung/66uvybb8

【参考方案1】：

你不需要 beforeShowDay 来禁用周三，如果你查看文档，他们确实为你禁用了WeekDays。

disabledWeekDays: [3] // will disable Wednesday

然后您可以使用 onChangeDateTime 检查用户点击的日期，以便您可以根据用户的选择重置允许的时间。

 onSelectDate:function(dp,$input) // this will switch available time when choose the day
  if (dp.getDay() == 2) 
    this.setOptions(
      allowTimes: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00']
    );
   else 
    this.setOptions(
      allowTimes: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']
    );
  

您还可以为初始允许时间做一个 if 语句来检查当天是否是星期二，它是星期二，初始允许时间是上午 8 点到下午 2 点，如果不是上午 8 点到下午 6 点

allowTimes: new Date().getDay() == 2 ? ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'] : ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'], // this we show 8am-2pm if today day is Tuesday

见我的DEMO

【讨论】：

非常感谢 Trung Huynh。这真的对我有用。现在我唯一不能工作的是disabledDates。即使我添加 disabledDates 列表，它们也不起作用。我不确定我是否以错误的方式这样做，你可以看到我提供的小提琴。当有人预订诸如“2016-12-12 09:00”之类的日期时，应在单击无日期选择器时禁用此日期和时间。这是我需要在 onChangeDateTime 事件中添加的内容吗？感谢您的帮助:)

@user75472 我真的不明白你真正想用 disabledDates 做什么。请让我更好地了解您到底想做什么。

我有一个课程预订网站。如果有人为 2016-12-12 9:00 预订课程，那么该日期/时间应该对其他人禁用。这有意义吗。请让我知道这是否需要解释。谢谢

@user75472 好的，我现在明白了，正在努力。看起来文档上没有任何内容允许我们这样做，如果我弄清楚了会告诉我

谢谢@trung-huynh。我不是 100%，但我认为这也取决于 datetimepicker 的版本，所以我正在尝试不同的版本，或者如果有的话，我可能需要寻找另一个选项。如果您对其他日期时间选择器插件有任何想法，请告诉我