element ui 自定义的快捷选项的日期选择器并格式化

效果图

时间日期选择器（el-date-picker）
设置为段时间：
type="datetimerange"
规范格式：
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"

1 .给日期选择器el-date-picker标签添加picker-options属性，传入变量pickerOptions

<el-date-picker //日期选择器
    v-model="timeCycle" //双向绑定一个value值
    type="datetimerange" // 时间选择器的类型
    :picker-options="pickerOptions" //绑定一个变量获取到快捷键
    range-separator="至" // 日期选择器上开始和结束时间中间的文字
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    format="yyyy-MM-dd"   //格式化日期
    value-format="yyyy-MM-dd"//value值的格式规定时间格式
>
</el-date-picker>

2日期选择器绑定变量timeCycle

<script>
export default {
    data(){
      return {
          timeCycle:[]
      }
    }
}
</script>

3给pickerOptions变量设置shortcuts属性
完整的如下:

export default {
    data(){
      return {
          timeCycle:[] ,
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [date,date]);
            }
          }, 
            {
            text: '近7天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() - 3600 * 1000 * 24 )
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '近30天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() - 3600 * 1000 * 24 )
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '近90天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() - 3600 * 1000 * 24 )
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
           {
            text: '近180天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() - 3600 * 1000 * 24 )
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() - 3600 * 1000 * 24 )
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            },
          },
          {text: '本周',
              onClick(picker) {
                 const end = new Date();
                 const start = new Date();
                 end.setTime(start.getTime() - 3600 * 1000 * 24 )
                 //现在星期几；0代表星期天，6代表星期六
                 var thisDay = start.getDay();
                 //现在是一个月的第几天
                 var thisDate = start.getDate();
                 console.log(thisDay)
                 console.log(thisDate)
                 if (thisDay != 0) {
                     start.setDate(thisDate - thisDay+1);
                 }
                   picker.$emit('pick', [start, end]);
              }
           },
           {
              text: '本月',
              onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  end.setTime(start.getTime() - 3600 * 1000 * 24 )
                  start.setDate(1);
                  picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '本季度',
              onClick(picker) {
                  var oDate = new Date();
                  var thisYear = oDate.getFullYear();
                  var thisMonth = oDate.getMonth() + 1;
                  var n = Math.ceil(thisMonth / 3); // 季度
                  var Month = n * 3 - 1;
                  var start = new Date(thisYear, Month - 2, 1);
                  var end = new Date();
                  end.setTime(end.getTime() - 3600 * 1000 * 24 )
                  picker.$emit('pick', [start, end]);
            }
          },
          {
              text: '本年',
              onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setMonth(0);
                  start.setDate(1);
                  end.setTime(end.getTime() - 3600 * 1000 * 24 )
                  picker.$emit('pick', [start, end]);
              }
          }, 
          ]
        },
      }
    }
}

4.选好收结果是个数组

this.timeCycle 可以获取到所选的结果