Flatpicker设置maxDate的minHour为00时失效问题求助

我之前碰到过这个情况，flatpicker在处理00:00作为maxDate的时间节点时，确实存在这个逻辑问题——它会把2020-12-15T00:00识别为12月15日的起始时刻，但组件默认的时间限制逻辑并没有正确拦截当天00:00之后的时间选择，导致小时还能继续递增。下面给你几个可行的解决方案：

方法一：调整maxDate为前一天的23:59 #

这是最简单的临时解决办法，直接把maxDate的时间设为目标日期前一天的最后一分钟，这样用户无法选择目标日期的任何时间，自然不会出现小时递增的问题：

var maxDateRec = "2020-12-14T23:59";

方法二：动态设置maxTime限制 #

通过flatpicker的onValueUpdate事件监听日期选择变化，当用户选中maxDate对应的日期时，强制将当天的最大时间设为00:00，其他日期则恢复正常的时间上限：

// 初始化日历组件
var calendar = $("#basicDate").flatpickr({
  dateFormat: "Y-m-d H:i",
  defaultDate: new Date(),
  enableTime: true,
  time_24hr: true,
  minDate: new Date(),
  maxDate: new Date(),
  minDateHasTime: true,
  maxDateHasTime: true,
  hourIncrement: 1,
  onValueUpdate: function(selectedDates) {
    const targetMaxDate = new Date("2020-12-15T00:00");
    // 对比选中日期的日期部分是否与目标maxDate一致
    if (selectedDates[0]?.toDateString() === targetMaxDate.toDateString()) {
      // 选中目标日期时，限制最大时间为00:00
      this.set("maxTime", "00:00");
    } else {
      // 其他日期恢复正常时间上限
      this.set("maxTime", "23:59");
    }
  }
});

var minDateRec = "2020-12-07T00:00";
var maxDateRec = "2020-12-15T00:00";
var minDateRecFom = new Date(minDateRec);
var maxDateRecFom = new Date(maxDateRec);

calendar.set("minDate", minDateRecFom);
calendar.set("maxDate", maxDateRecFom);

方法三：用disable函数彻底拦截超期时间 #

通过flatpicker的disable配置项，直接禁用所有晚于目标maxDate的时间点，这是最彻底的解决方案，能确保任何超过2020-12-15T00:00的时间都无法被选中：

var maxDateRecFom = new Date("2020-12-15T00:00");

// 初始化日历组件
var calendar = $("#basicDate").flatpickr({
  dateFormat: "Y-m-d H:i",
  defaultDate: new Date(),
  enableTime: true,
  time_24hr: true,
  minDate: new Date(),
  maxDate: new Date(),
  minDateHasTime: true,
  maxDateHasTime: true,
  hourIncrement: 1,
  // 禁用所有晚于目标maxDate的日期时间
  disable: function(date) {
    return date > maxDateRecFom;
  }
});

var minDateRec = "2020-12-07T00:00";
var minDateRecFom = new Date(minDateRec);

calendar.set("minDate", minDateRecFom);
calendar.set("maxDate", maxDateRecFom);

个人更推荐方法三，它能从根源上拦截所有不符合要求的时间选择，完全匹配你设置maxDate为00:00的需求。

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