对vant-timepicker的详用

1.基本介绍：

        在使用DatetimePicker的组件的时候，发现可以不仅仅局限于对时间的选择，还可以限制对具体某一天的使用（之测试过vue2 vue3未测）

2.逻辑说明：

        在DatetimePicker里面有一个picker-options的Props，可以用来绑定其实际的规则，以及便利使用的方法，通过在date里面实现双向绑定，可以通过在生命周期内函数的改变从而使得组件的规则发生改变。

3.具体实现：

        <el-date-picker
          v-model="date"                      //绑定具体时间的值
          align="right"
          type="date"                         //类型选择
          placeholder="选择日期"
          :clearable="false"                  //清空时间
          @change="dateChange"                //改变方法绑定
          :picker-options="pickerOptions"     //规则事件绑定
        >
        </el-date-picker>

//disabledDate 在这里我主要用于对时间是被允许显示的判断
data(){
    return{
        pickerOptions: {
            disabledDate: (time) => {},
            shortcuts: []
        },
    }
}

在生命周期内绑定该方法（我的建议在create内)

    getDay() {
      const // 定义常量
        { in_date } = this.hosUserInfo, // 开始时间
        inDateTS = +this.$moment(in_date || '1970-01-01').valueOf(), // 开始时间戳
        nowTS = +this.$mymoment().timeStamp,
        dayTS = 3600 * 24 * 1000; // 一天的时间戳

      // 配置禁止查询时间
      this.pickerOptions['disabledDate'] = (time) => {
        // 禁止选择12年前的日期
        if (time.getTime() < inDateTS) return true;
        // 禁止选择大于今天的日期（今天是可以被选择的）
        else if (time.getTime() > Date.now()) return true;
      };

      // 生成快捷日期配置规则
      this.pickerOptions.shortcuts = [];
      const timeRules = [
        { text: '开始时间', timestamp: inDateTS },
        { text: '今天', timestamp: nowTS },
        { text: '昨天', timestamp: nowTS - dayTS },
        { text: '一周前', timestamp: nowTS - dayTS * 7 },
        { text: '两周前', timestamp: nowTS - dayTS * 14 },
        { text: '三周前', timestamp: nowTS - dayTS * 21 },
        ...(() => {
          const months = [];
          for (let i = 1; i < 12; i++) {
            months.push({
              text: `${numberFormatChinese(i)}个月前`,
              timestamp: nowTS - dayTS * (30 * i),
            });
          }
          return months;
        })(),
        { text: '一年前', timestamp: nowTS - dayTS * 365 },
      ];
      // 根据需求来判断是否展现指定的快捷跳转
      for (const item of timeRules) {
        if (inDateTS <= item.timestamp) {
          const { text, timestamp } = item;
          this.pickerOptions.shortcuts.push({
            text,
            onClick: (picker) => picker.$emit('pick', timestamp),
          });
        }
      }
    },

    dateChange() {
      //绑定你要跳转的方法
      this.selDate = this.$moment(this.date).format('YYYY-MM-DD');
      this.getInfoDetail(this.selDate);
    },

4.实现效果：

5.总结：

        在某些不想选择时间但是会有常用时间的地方会用到