Bootstrap datetimepicker如何禁用日历中的指定日期？

你可以借助Bootstrap datetimepicker的beforeShowDay回调函数轻松实现禁用周一和周六的需求，这个函数会在每个日期渲染前触发，我们可以通过判断日期的星期属性来控制它是否可选。

完整代码示例 #

$(".dtp").datetimepicker({
    format: 'Y-M-D hh:mm',
    minDate: new Date(),
    beforeShowDay: function(date) {
        // 获取当前日期的星期值：0=周日，1=周一，2=周二...6=周六
        const dayOfWeek = date.getDay();
        // 允许除了周一(1)和周六(6)之外的所有日期
        return [(dayOfWeek !== 1 && dayOfWeek !== 6)];
    }
});

代码说明 #

• date.getDay() 方法返回0到6的整数，对应一周中的每一天，其中1代表周一，6代表周六。
• beforeShowDay 函数需要返回一个数组：第一个元素是布尔值，true表示日期可用，false表示禁用；如果需要给禁用的日期自定义样式，还可以添加第二个元素作为CSS类名，比如：

  return [(dayOfWeek !== 1 && dayOfWeek !== 6), 'disabled-date-style'];
  

  然后你可以在CSS中设置这个类的样式：

  .disabled-date-style {
      background-color: #eee;
      color: #999;
      pointer-events: none;
  }
  

这样设置后，你的datetimepicker就会自动禁用所有周一和周六，同时保留你原来设置的minDate限制啦。

内容的提问来源于stack exchange，提问作者user896415