elemenui datePicker 日期组件之快捷键的自定义，本周，本月，本季度，上周，上月，上季度

1，先定义一个日期工具类，或者写在其他的方法中都行。定义工具类可重复使用

 1  export function getDateRang(val) {
 2   const now = new Date(); // 当前日期
 3   const nowDayOfWeek = now.getDay(); // 今天是本周的第几天
 4   const nowDay = now.getDate(); // 当日
 5   const nowMonth = now.getMonth(); // 当月
 6   const nowYear = now.getFullYear(); // 当年
 7   const qt = Math.ceil((nowMonth + 1) / 3);
 8   let startTime;
 9   let endTime;
10   let customTime = [];
11   switch (val) {
12     case 'week': // 本周
13       startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1);
14       endTime = new Date(nowYear, nowMonth, nowDay + 7 - nowDayOfWeek);
15       break;
16     case 'month': // 本月
17       startTime = new Date(nowYear, nowMonth, 1);
18       endTime = new Date(nowYear, nowMonth + 1, 0);
19       break;
20     case 'quarter': // 本季度
21       startTime = new Date(nowYear, (qt - 1) * 3, 1);
22       endTime = new Date(nowYear, qt * 3, 0);
23       break;
24     case 'lastWeek': // 上周
25       startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 6);
26       endTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
27       break;
28     case 'lastMonth': // 上月
29       startTime = new Date(nowYear, nowMonth-1, 1);
30       endTime = new Date(nowYear, nowMonth, 0);
31       break;
32     case 'lastQuarter': // 上季度
33       startTime = new Date(nowYear, qt, 1);
34       endTime = new Date(nowYear, qt + 3, 0);
35       break;
36     default: // 自定义时间
37       customTime = val.split(' - ');
38       break;
39     case 'yesterday': // 昨日
40       startTime = new Date(nowYear, nowMonth, nowDay - 1);
41       endTime = new Date(nowYear, nowMonth, nowDay - 1);
42       break;
43     case 'pastWeek': // 近 7 日
44       startTime = new Date(nowYear, nowMonth, nowDay - 6);
45       endTime = new Date(nowYear, nowMonth, nowDay);
46       break;
47     case 'pastMonth': // 近 31 日
48       startTime = new Date(nowYear, nowMonth, nowDay - 30);
49       endTime = new Date(nowYear, nowMonth, nowDay);
50       break;
51     case 'year': // 今年
52       startTime = new Date(nowYear, 0, 1);
53       endTime = new Date(nowYear, 11, 31);
54       break;
55   }
56   return customTime.length ? customTime : [startTime, endTime];
57 }

2，标签使用  :picker-options="pickerOptions"，在渲染页面引入上面的方法

 1         <el-form-item label="日期选择" prop="date">
 2           <el-date-picker
 3             v-model="date"
 4             type="daterange"
 5             value-format="yyyy-MM-dd"
 6             style="width: 280px"
 7             align="left"
 8             unlink-panels
 9             range-separator="至"
10             start-placeholder="开始日期"
11             end-placeholder="结束日期"
12             :picker-options="pickerOptions">
13           </el-date-picker>

3，js部分，在data中设置方法

 1 pickerOptions: {
 2         shortcuts: [{
 3           text: '本周',
 4           onClick(picker) {
 5             const start = getDateRang('week')[0]
 6             const end = new Date()
 7             picker.$emit('pick', [start, end]);
 8           }
 9         }, {
10           text: '本月',
11           onClick(picker) {
12             const start = getDateRang('month')[0]
13             const end = new Date();
14             picker.$emit('pick', [start, end]);
15           }
16         }, {
17           text: '本季度',
18           onClick(picker) {
19             const start = getDateRang('quarter')[0]
20             const end = new Date();
21             picker.$emit('pick', [start, end]);
22           }
23         },{
24           text: '上周',
25           onClick(picker) {
26             const start = getDateRang('lastWeek')[0]
27             const end = getDateRang('lastWeek')[1]
28             picker.$emit('pick', [start, end]);
29           }
30         }, {
31           text: '上月',
32           onClick(picker) {
33             const start = getDateRang('lastMonth')[0]
34             const end = getDateRang('lastMonth')[1]
35             picker.$emit('pick', [start, end]);
36           }
37         }, {
38           text: '上季度',
39           onClick(picker) {
40             const start = getDateRang('lastQuarter')[0]
41             const end = getDateRang('lastQuarter')[1]
42             picker.$emit('pick', [start, end]);
43           }
44         }]
45       },