iview和element中日期选择器快捷选项的定制控件

公司的两个vue项目中都用到了iview和element这个框架，最近的两个需求都有关于日期选择的定制控件，就是要求日期选择的快捷选项左边栏有包含今日、昨日、本周、上周、最近一周、本月、上月、上季度、本季度、去年、今年，由于element官网中对于这样的快捷选项并不是很好，满足不了实际的场景需要，所以就要自己定制开发。上网查了一些文档，根据实际需求定制了如下的控件，由于iview和element类似，下面只介绍element框架，iview也可以直接套用。如果你的需求和我的类似，直接就可以拷贝，按照步骤操作即可实现。

第一步：安装moment

moment.js是一个非常实用的JS日期工具类，例如对日期获取，格式化等操作都很方便，如果想进一步了解，可参考官网，地址如下：

官网地址：Moment.js 中文网

第二步：在需要的日期页面中引入

import moment from "moment";

第三步：在属性 options 对象中的 shortcuts 可以设置快捷选项。

注意：如果你的需求要求传递时分秒的话就把 HH:mm:ss 加上，如果仅仅是需要传递年月日，就直接删除 HH:mm:ss 即可。

      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])
          }
        }]
      }

第四步：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>

第五步：在使用之前可以先在控制台打印出来，看是否符合自己的实际需求，如下：

   selectDate(date) {
　　　　console.log(date[0]) // 开始时间
　　　　console.log(data[1]) // 结束时间
　　}

这些是element框架中使用的，iview框架同理，套用即可。

以上是我在实际开发中遇到的问题，希望看到这篇文章的小伙伴可以得到收获，有兴趣可以关注我，互相学习。

有问题也可留言，我会及时处理回答，谢谢。

原创不易，多谢支持！

iview和element中日期选择器快捷选项的定制控件

猜你喜欢