iview中日历的自定义

iview官网
1、DatePicker中增加快捷搜索，比如：今日、本周、本月、本年等。拿到这样的需求不知道怎么办，所以要干嘛呢？看官网看官网看官网（重要是事说三遍哈）。
发现DatePicker中这么一个属性


好像可以满足我们目前需要的功能，动手开始做吧~

<template>
<div>
 <DatePicker
              v-model="dataTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="daterange"
              :editable="false"
              separator=" 至 "
              @on-change="changeTime($event)"
              placement="bottom-end"
              placeholder="请选择时间"
              transfer
              style="width: 200px"
              :options="dateOptions"
            ></DatePicker>
</div>
</template>
<script>
data(){
return:{
dateOptions:{
shortcuts:[
 {
            text: "今日",
            onClick(picker) {
              const end = new Date().format("yyyy-MM-dd");
              const start = new Date().format("yyyy-MM-dd");
              picker.$emit("on-change", [start, end]);
            },
}
</script>

看着好像是对的，那运行一下看看吧

点击一下今日。哟呵，没有想象中的效果啊。弹出框没有消失，v-model绑定的数据也没有值。
明明有发送onchang的通知为什么在DatePicker对应的onchang函数中没有相应呢，猜测picker.$emit(“on-change”, [start, end]);picker不是当前的DatePicker。
验证一下。

 <DatePicker
              ref="datePickerTest"
              v-model="dataTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="daterange"
              :editable="false"
              separator=" 至 "
              @on-change="changeTime($event)"
              placement="bottom-end"
              placeholder="请选择时间"
              transfer
              style="width: 200px"
              :options="dateOptions"
            ></DatePicker>

打印

console.log(this.$refs.datePickerTest)

再打印一下shortcuts里面的picker对比一下：

果然不一样 说明shortcuts中picker不是当前日期选择器的实例
解决方案1：找到当前的日期实例发送onchang通知，让弹出框消失，给实例赋值
仔细看picker打印的结果

呀这不是：picker的父类的父类就是当前日期的实例嘛 ，修改shortcuts

shortcuts: [
          {
            text: "今日",
            onClick(picker) {
              console.log('shortcuts中的picker',picker)
              const end = new Date().format("yyyy-MM-dd");
              const start = new Date().format("yyyy-MM-dd");
              picker.$parent.$parent.value = [start, end]
              picker.$parent.$parent.visible = false
              picker.$parent.$parent.$emit("on-change", [start, end]);
              
            },
          },

尝试一下效果，完美。但是。。。这种方法这么麻烦显然应该有简单的方法才对。接下来介绍第二种
解决方案二：使用shortcuts中value属性

shortcuts: [
          {
            text: "今日",
            value() {
              const end = new Date();
              const start = new Date();
              return [start, end];
            },
          },

呀，结束。如果还有更好的办法请告诉我一声。万分感谢~~