通常，在html中利用input标签我们就可以创建一个日期选择的元素了。当然这样的日期的选择肯定是最原始的，但是功能肯定能实现了。

事与愿违，这样的日期选择元素在chrom浏览器中一直都很给力。很不幸的是有一天我在firefox上打开这个带日期选择的页面，就发现点了input居然不起作用了。年轻的我也意识到了，这是浏览器不支持吧。

遂，在jq之家找到了flatpickr这个插件。今天记录一下对这个插件的使用

上传这个插件的前辈都是在16年的时候传到jq之家上的。于是现在我也用的16版本，虽然不是现在的4.x版本，但目前我需要的功能他都能实现了。

还有一点，我现在还是jquery的忠实用户~~

第一个先实现日期选择的功能

第一步：肯定是先导入他给的css 和 js 文件，

<script src="../js/jquery.js"></script>
<script src="./flatpickr/dist/flatpickr.min.js"></script>
<script src="./flatpickr/dist/flatpickr.l10n.zh.js"></script>

第二步：写一个input标签

<input class="input-date" placeholder="请选择时间">

第三步: 初始化flatpickr

$('.input-date').flatpickr({});

这样就能使用了，很快是不是

插入一下这一步的代码

  <input class=".input-date">

  <script>

    // 默认初始化日期选择插件
    $('.input-date').flatpickr();
  <script>

第二，我想实现有两个日期选择框，第一是开始时间的选择，第二个是结束时间的选择

这里会存在一个逻辑，结束时间框中选择的时间就只能是开始时间后面的时间

不多说，先上代码

<h2>开始时间</h2>
  <input class="input-date input-date-a" type="text" placeholder="选择时间">
  <h2>结束时间</h2>
  <input class="input-date input-date-b" type="text" placeholder="选择时间">

  <script>

    // 默认初始化日期选择插件
    $('.input-date').flatpickr({
      enableTime: true,
      time_24hr: true,
      enableSeconds: true,
    });

    // 开始时间
    $('.input-date-a').flatpickr({
      enableTime: true,
      time_24hr: true,
      enableSeconds: true,
      onClose: function (selectDates, dateStr, instance) {
        var endTimeValue = $('.input-date-b').val();        // 第二个选择框选择的日期

        endTimeValue = new Date(dateStr).getTime() < new Date(endTimeValue) 
                            ? endTimeValue 
                            : '';    // 判断第二个选择的时间是否在第一个选择的后面

        // 设置结束选择
        $('.input-date-b').flatpickr({
          enableTime: true,
          time_24hr: true,
          enableSeconds: true,
          defaultDate: endTimeValue,
          model: 'range',
          minDate: dateStr
        });
      }
    });

这里我的想法是，当第一个选择框关闭的时候，设置第二个选择的结束时间的最小值。当如果结束时间比开始时间先选取了值时， 在第一个框的开始时间选择完成时判断开始时间是否在结束时间前面，然后为第二个选择框设置默认值就好了；

这里有几个flatpickr的参数需要说明

插件默认只会有日期的选择而没有时间的选择，所以要设置时间的选择就是：

enableTime: true,
time_24hr: true, // 24小时时间制
enableSeconds: true, // 毫秒级别

一个钩子函数，在关闭的日期选择框时触发

onClose: function (selectDates, dateStr, instance) {}
selectDates // Fri Aug 17 2018 12:00:00 GMT+0800 (中国标准时间)
dateStr // 2018-08-17 12:00:00
instance // 因该是flatpickr对象(这个目前没有深入理解)

设置选择的最小日期、以及默认日期

minDate: dateStr
defaultDate: '2018-08-17 12:00:00'

对了这里提一句，我现在用的版本如果是鼠标移到不能选择日期上时不会时cursor: no-drop的效果

需要自己设置一下css样式,

<style>
.disabled {
   cursor: no-drop !important;
}
</style>