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 end = new Date();
               const start = new Date();
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
               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出去就好，官方文档上有简单例子，一看就知道了

5.禁止今天过后的日期，不包括今天

<DatePicker type="date" :options="options" placeholder="Select date" style="width: 200px"></DatePicker>


data() {
   return {
     options: {
         disabledDate (date) {
             return date && date.valueOf() >= new Date();
         }
     }
 }

6.禁止今天以前的日期

 options: {
           disabledDate (date) {
              return date && date.valueOf() < Date.now() - 86400000;
           }
    },

参考借鉴 https://www.cnblogs.com/wangzhenhai/p/11714130.html