flatpickr时间日期插件的问题

单位最近做后台活动的开发,用到一个时间日期插件,就自己搜了一个,flatpickr

就是他,jq插件

免费开源的, 小白使用起来也是很方便, 介绍一下这个插件吧:

有这个差不多就齐了,页面上已经可以显示出来这个插件了

但是需求是有开始时间和结束时间:而且开始时间得比结束时间早
API来了:

划线的都是比较重要的
同上

然后我就使用了这个插件,使用这些配置项开始了踩坑之路;

value是从后台获取的

看看我的配置项:

var check_in = document.getElementById("check_in_date").flatpickr({
        minuteIncrement:1,
        enableTime:true,
        enableSeconds:true,
        time_24hr:true,
        minDate:'today',
        altInput: false,
        altFormat: "\\C\\h\\e\\c\\k \\i\\n\\: l, F j Y",
        minDate: new Date()
      });
     
      var check_out = document.getElementById("check_out_date").flatpickr({
        minuteIncrement:1,
        enableTime:true,
        enableSeconds:true,
        time_24hr:true,
        altInput: false,
        altFormat: "\\C\\h\\e\\c\\k \\o\\u\\t: l, F j Y",
        minDate: new Date(),
        disable: [new Date().fp_incr(-1)]
      });
 check_in.config.onChange = function(dateObj) {
        check_out.set("minDate", dateObj.fp_incr(1));
      };
      check_out.config.onChange = function(dateObj) {
        check_in.set("maxDate", dateObj.fp_incr(-1));
      }

有没有很熟悉,这是实例上完全拿过来的,但是有个问题,check_out_date 这个时间是获取的,从数据库读取的,等于这个值并没有起到真正的限制作用,所以,check_in_date改变的话,check_out_date没有改,是可以保存成功的,并没有拦截,这个插件是有这个功能的,实现方法是,先点击限制结束时间,再选定开始时间,就可以限制

后台管理系统页面