时间日期选择器选择范围|动态设置选择范围|增设快捷键
日期组件时间选择范围
1.限制选中的时间范围
点击时间选择器后,展示的时间如果不在规定的范围内将会被置灰
<el-date-picker
v-model="time"
:picker-options="pickerOptions"
popper-class="range-class"
type="datetimerange"
range-separator="至"
:editable="false"
:clearable="false"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
>
</el-date-picker>
其中 picker-options中的属性可以限制选择的区间
data() {
return {
pickerOptions: {
// 设置时间日期选择器的禁用范围(是禁用范围 不是可选范围)
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7; //禁用今天之前的日期
// 8.64e6 表示一天的时间(毫秒)
return (
time.getTime() < new Date(ccc).getTime() ||
time.getTime() > nowData.getTime() - 1000
);
// 通过更改return 里的返回值即可调整选择范围
}
},
}
2.动态设置选择范围(如:选择时间范围不超过1个月)
日期选择器的可选范围为动态控制时,需要增加一个onPick 来动态控制disabledData的禁用状态
data() {
return {
pickerMinDate:'',
pickerOptions: {
// 当选中某一个时间时执行该方法
onPick: ({ maxDate, minDate }) => {
// 获取点击的时间信息并进行记录
this.pickerMinDate = minDate.getTime();
// 如果选择完最大时间 将记录擦除
if (maxDate) {
this.pickerMinDate = '';
}
},
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7; //禁用今天之前的日期
// 8.64e6 表示一天的时间(毫秒)
if(this.pickerMinDate){
return (
time.getTime() > new Date().getTime() ||
this.getTime() < this.pickerMinDate
);
// 动态禁用:禁用今天之后的时间和选中点前的时间
}else{
return time.getTime() > new Date().getTime()
}
// 禁用
}
},
}
3..增设快捷日期
利用shortcuts设置快捷选项 如:选中7天、选中1个月 等
data() {
return {
pickerOptions: {
// 设置时间日期选择器的快捷按钮
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}]
},
}