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

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

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

原创不易，多谢支持！