ElementUI 日期选择器 DatePicker 实现周一,周二之类的速选
自己用到了,分享一下
很简单,就是通过组件提供的快捷项实现的
<template>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value1"
align="right"
type="dates"
placeholder="手动选择多个"
:picker-options="pickerOptions1">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions1: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '周一',
onClick(picker) {
var date=new Date();
var end=new Date().getTime()+60*24*3600*1000;//60天内的周一
var day = date.getDay() || 7;
var basenum=1;//1到7代表周一到周日
var weekstart = new Date(date.getFullYear(), date.getMonth(), date.getDate() + basenum - day).getTime();
var dates=[];
if (weekstart >= date.getTime()) {
dates.push(weekstart)
}
while (weekstart<end){
weekstart=weekstart+7*24*3600*1000;
dates.push(weekstart)
}
picker.$emit('pick', dates);
}
},]
},
value1: '',
};
}
};
</script>
最终效果如图
本作品采用《CC 协议》,转载必须注明作者和本文链接
[iwzh]
(github.com/iwzh)