elementUI的组件文档中没有详细说明type="dates"如何快捷选择一个时间段的日期,我们可以通过picker-options参数来设置快捷选择:
<div class="block">
<span class="demonstration">多个日期</span>
<el-date-picker
type="dates"
v-model="value4"
:picker-options="pickerOption"
placeholder="选择一个或多个日期">
</el-date-picker>
</div>
</div>
通过设置变量pickerOption的值可设置快捷选择:文章来源:https://www.toymoban.com/news/detail-635224.html
pickerOption:{
shortcuts:[
text:'这半个月',
onClick(picker){
let end = new Date();
let start = dateFormat(new Date(),'-');
end.setTime(end.getTime() + 3600 * 1000 * 24 * 14);
end = dateFormat(end,'-');
let allDate = getAllDate(start,end);
picker.$emit('pick', [...allDate]);
}
]
}
其中dateFormat方法是将日期格式化,getAllDate方法是获取开始和结束日期之间的全部日期,在data中定义:文章来源地址https://www.toymoban.com/news/detail-635224.html
let dateFormat = (time,h='')=>{
let ymd = '';
let month = (time.getMonth() + 1 )>=10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() +1));
let day = time.getDate() >= 10? time.getDate() : ('0' + time.getDate());
ymd += time.getFullYear() +h;
ymd += month + h;
ymd += day;
return ymd;
}
let getAllDate=(start,end)=>{
let allDateArr=[];
let startArr = start.split('-');
let endArr = end.split('-');
let db = new Date();
let db.setUTCFullYear(startArr[0[,startArr[1]-1,startArr[2]);
let de = new Date();
de.setUTCFullYear(endArr[0[,endArr[1]-1,endArr[2]);
let unixDb = db.getTime();
let unixDe = de.getTime();
let stamp;
const oneDay = 24*60*60*1000;
for(stamp = inixDb;stamp<=unixDe;){
allDateArr.push(dateFormat(new Date(parseInt(stamp)),'-'));
stamp = stamp+oneDay;
}
return allDateArr;
}
到了这里,关于datePicker一个或多个日期组件,如何快捷选择多个日期(时间段)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!