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框架同理，套用便可。

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

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

 

原创不易，多谢支持！