work-notes（16）：elementUI 的时间选择器如何添加选择时间格式，例如选择今天起往后7、15、30天

时间：2022-06-15

问题描述

需求大致如下：
	可根据点击左侧的时间，把时间带入 今天起 至 往后的多少天；

如何解决

1、首先去 elementUI 复制他们的组件

其中 :picker-options=“pickerOptions” 就是绑定的选择时间

<el-date-picker
  type="daterange"
  align="right"
  unlink-panels
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  style="width: 100%"
  :picker-options="pickerOptions"
  v-model="personInfo.duration"
/>

2、时间格式获取

// 持续时间
pickerOptions: {
  disabledDate(time) {
    // 减去值是为了能选择当天
    return time.getTime() < Date.now() - 3600 * 1000 * 24 * 1;
  },
  shortcuts: [
    {
      text: "7天",
      onClick(picker) {
        const start = new Date();
        const end = new Date();
        end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
        picker.$emit("pick", [start, end]);
      },
    },
    {
      text: "15天",
      onClick(picker) {
        const start = new Date();
        const end = new Date();
        end.setTime(start.getTime() + 3600 * 1000 * 24 * 15);
        picker.$emit("pick", [start, end]);
      },
    },
    {
      text: "30天",
      onClick(picker) {
        const start = new Date();
        const end = new Date();
        end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
        picker.$emit("pick", [start, end]);
      },
    },
  ],
},

时间换算：
一天 24小时；一小时 60分钟；一分钟 60秒；一秒钟 1000毫秒；

一天的时间戳：24*60*60*1000；

后面乘上多上天就完事了；

注意：

1、这里是允许手动选择的；
2、设置 disabledDate 即为限制选择时间；
3、为什么要减去一天，就是为了能选中当天，
	别试了 <= 我都试过了不行，嘿嘿嘿（其实是想骂人MD为什么不行）；