Bootstrap4 datetimepicker 设置每周一及每日非营业禁用时段的实现方法

你当前使用的是Bootstrap DateTimePicker组件，原先的写法仅会生成代码运行当周的周一禁用区间，无法覆盖所有周的周一，且disabledTimeIntervals本身需要动态生成对应选中日期的禁用规则才能实现按天匹配的效果，具体实现如下：

1. 实现每周一固定时段禁用 #

监听日期选择事件，动态判断当前选中的日期是否为周一，对应生成禁用时段即可，完整代码示例：

// 初始化日期选择组件
const $datePicker = $('input.datetimepicker-input').datetimepicker({
  locale: '{{ eccube_config.locale }}',
  format: 'YYYY-MM-DD HH:mm',
  minDate: moment("{{minTime}}"),
  disabledTimeIntervals: []
});

// 监听日期变更事件，动态更新禁用规则
$datePicker.on('dp.change', function(e) {
  const selectedDate = e.date;
  const disabledIntervals = [];

  // 周一的day()返回值为1（周日为0，周二为2，以此类推）
  if (selectedDate.day() === 1) {
    // 生成当前选中周一的0:00-9:30禁用区间
    disabledIntervals.push([
      selectedDate.clone().hour(0).minute(0).second(0),
      selectedDate.clone().hour(9).minute(30).second(0)
    ]);
  }

  // 更新组件的禁用时段配置
  $(this).data("DateTimePicker").disabledTimeIntervals(disabledIntervals);
});

// 初始化完成后手动触发一次规则生效，避免首次打开时规则不生效
$datePicker.trigger('dp.change', {
  date: $datePicker.data("DateTimePicker").date() || moment()
});

2. 配置每日通用禁用时段 #

如果需要配置所有日期都生效的禁用时段（比如每日18:00到次日08:00不可选），直接在上述的事件监听逻辑中添加通用规则即可，示例：

$datePicker.on('dp.change', function(e) {
  const selectedDate = e.date;
  const disabledIntervals = [];

  // 周一专属禁用规则
  if (selectedDate.day() === 1) {
    disabledIntervals.push([
      selectedDate.clone().hour(0).minute(0),
      selectedDate.clone().hour(9).minute(30)
    ]);
  }

  // 每日通用禁用规则：当天18:00到次日08:00不可选
  disabledIntervals.push(
    // 当天18点到24点
    [selectedDate.clone().hour(18).minute(0), selectedDate.clone().hour(23).minute(59)],
    // 次日0点到8点
    [selectedDate.clone().add(1, 'day').hour(0).minute(0), selectedDate.clone().add(1, 'day').hour(8).minute(0)]
  );

  $(this).data("DateTimePicker").disabledTimeIntervals(disabledIntervals);
});

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