iview和element中日期選擇器快捷選項的定製控件

後臺管理項目開發經常會用到iview和element-ui這兩個組件庫，最近碰到業務需求要求日期選擇的快捷選項左邊欄有包含今日、昨日、本週、上週、最近一週、等快捷按鈕，文檔上對於這塊其實不怎麼友好，所以上網查了一些文檔，根據實際需求定製瞭如下的控件，由於iview和element類似，下面只介紹element框架，iview也可以直接套用，就是參考官方文檔修改下配置項格式就好.

1. 首先用到了moment.js，官方地址Moment.js 中文網，它是處理日期時間的一個類庫，非常好用。安裝後然後在項目中引入import moment from "moment";
2. 配置項

pickerOptions: {
        shortcuts: [{
          text: '今日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '昨日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '上週',
          onClick(picker) {
            const start = moment(moment().week(moment().week() - 1).startOf('week').add(1, 'days').valueOf()).format("YYYY-MM-DD HH:mm:ss")
            const end = moment(moment().week(moment().week() - 1).endOf('week').add(1, 'days').valueOf()).format("YYYY-MM-DD HH:mm:ss");
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本週',
          onClick(picker) {
            const start = moment(moment().week(moment().week()).startOf('week').add(1, 'days').valueOf()).format("YYYY-MM-DD HH:mm:ss")
            const end = moment(moment().week(moment().week()).endOf('week').add(1, 'days').valueOf()).format("YYYY-MM-DD HH:mm:ss");
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '上月',
          onClick(picker) {
            const start = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD');
            const end = moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD');
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本月',
          onClick(picker) {
            const start = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD');
            const end = moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD');
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一週',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '上季度',
          onClick(picker) {
            const start = moment(moment().quarter(moment().quarter() - 1).startOf('quarter').valueOf()).format('YYYY-MM-DD');
            const end = moment(moment().quarter(moment().quarter() - 1).endOf('quarter').valueOf()).format('YYYY-MM-DD');
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本季度',
          onClick(picker) {
            const start = moment(moment().quarter(moment().quarter()).startOf('quarter').valueOf()).format('YYYY-MM-DD');
            const end = moment(moment().quarter(moment().quarter()).endOf('quarter').valueOf()).format('YYYY-MM-DD');
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '去年',
          onClick(picker) {
            const start = moment(moment().year(moment().year() - 1).startOf('year').valueOf()).format('YYYY-MM-DD');
            const end = moment(moment().year(moment().year() - 1).endOf('year').valueOf()).format('YYYY-MM-DD');
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '今年',
          onClick(picker) {
            const start = moment(moment().year(moment().year()).startOf('year').valueOf()).format('YYYY-MM-DD');
            const end = moment(moment().year(moment().year()).endOf('year').valueOf()).format('YYYY-MM-DD');
            picker.$emit('pick', [start, end])
          }
        }]
      }

3. HTML中的代碼寫日期組件，下面可以直接拿來使用，如下：

<el-col :span="16">
          <el-date-picker
            v-model="timeValue"
            type="daterange"
            align="right"
            unlink-panels
            size="small"
            range-separator="-"
            start-placeholder="開始日期"
            end-placeholder="結束日期"
            @change="selectDate"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-col>

iview使用的話講onClick改爲value，並講處理好的值returen出去就好，官方文檔上有簡單例子，一看就知道了

參考借鑑 https://www.cnblogs.com/wangzhenhai/p/11714130.html