element之DatePicker时间选择器

描述:用于选择或输入日期;

demo：

需求：

1.可选择开始时间，结束时间;

2.开始时间不能和结束时间是同一天；

3.不能选择开始时间之前的时间；

开发：

首先先讲下失败的demo；

为了图方便选择了element DatePicker的选择日期范围，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用unlink-panels（亲测没多大用处）属性解除联动。

---

    默认

   

      v-model="value1"

      type="daterange"

      range-separator="至"

    :picker-options="pickerOptions"

      start-placeholder="开始日期"

      end-placeholder="结束日期">

   

---

实现只需给type设为daterange；

坑1::就是他的开始时间和结束时间绑定在value1这个数组里面；

坑2:他是同时触发的点击就必须选择两个时间，有点不符合实际；

坑3:结束时间能选择开始时间的日期；

坑4:由于是联动的选择器，他的 :picker-options （当前时间日期选择器特有的选项）属性下的disabledDate（设置禁用状态，参数为当前日期）只有一个方法并且不能很好的拿到开始选择的时间，所以最终选择放弃；

---

return {

              pickerOptions: {

                disabledDate: (time) => {

                    return time.getTime() < Date.now() - 8.64e7;

            },

---

成功的demo：

图一

如图一所示：

1.设置两个选择器，将其绑定的value分离开来；

2.给开始时间设置focus方法(点击开始时间获取焦点时触发)；主要为了判断endTimes是不是为空，不为空给他设为空，如图二所示

图二

3.结束时间设置disbled主要是通过判断他存不存在没选开始时间就直接选结束时间；

4.结束时间@change（选项值改变时触发）主要是为了解析选择拿到的中国时间，并将其赋给a标签的链接参数实现导出数据的功能，如图三所示；

5.confirmDate（将时间转换为yyy-mm-dd格式）后台需要接收的数据;exportUrl为a标签的链接；

图三

6.还一步就是 :picker-options中我主要做了如下判断（开始时间设置不能选择当天之前的时间，结束时间设置不能选同一天）,如图四所示

图四

7.开始时间return小于当天时间为不可点击；

8.结束时间return不能等于开始时间，后面的乘法为一天，加上这个就相当于是当天，new Date主要是将开始时间转换为时间戳，这样才可以作比较；

 最后：

 当一种方法走不通不要使劲往里钻，试试其他的说不定更简单；