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框架同理,套用即可。
以上是我在实际开发中遇到的问题,希望看到这篇文章的小伙伴可以得到收获,有兴趣可以关注我,互相学习。
有问题也可留言,我会及时处理回答,谢谢。
原创不易,多谢支持!