Element-UI中的时间选择器代码示例没有提供本月及上个月的快捷选择方式,以下提供所需代码,方便大家使用。
以下是要实现的效果图:
以下快捷选择方式的配置代码:
代码语言:javascript复制pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [
{
text: "今天",
onClick(picker) {
picker.$emit("pick", new Date());
},
},
{
text: "昨天",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit("pick", date);
},
},
{
text: "一周前",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", date);
},
},
{
text: '本月',
onClick(picker) {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() 1;
if(month<10){
month = '0' month;
}
var myDate = new Date(year,month,0);
// 本月第一天
var startDate = new Date(year '-' month '-01 00:00:00');
picker.$emit('pick', [startDate, now]);
}
},
{
text: '上个月',
onClick(picker) {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
if(month==0){
month = 12;
year = year-1;
}
if(month<10){
month = '0' month;
}
var myDate = new Date(year,month,0);
// 上个月第一天
var startDate = new Date(year '-' month '-01 00:00:00');
// 上个月最后一天
var endDate = new Date(year '-' month '-' myDate.getDate() ' 23:59:00');
picker.$emit('pick', [startDate, endDate]);
}
}
],
}