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 可以獲取到所選的結果