element的DateTimePicker 日期时间选择器怎么限制只能选择某个时间段?只能选择一个月?其它时间不能选择。
·
项目场景:
我们在使用element的DateTimePicker 日期时间选择器的时候,有时候会限制范围,比如只能选择一个月的时间,这时候需要对选择的范围进行限制。
实现方案:
我们看element官网我们发现可以用picker-options来对其限制,实现方法如下:
<el-date-picker
v-model="loggerQueryData.operateTime"
type="datetimerange"
start-placeholder="开始时间"
end-placeholder="结束时间"
@change="onChangeTime('picker')"
:picker-options="pickerOptions">
</el-date-picker>
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
let now = new Date(); //获取此时的时间
let nowData = new Date( //获取此时年月日的后一天
now.getFullYear(),
now.getMonth(),
now.getDate() + 1 //获取明天
);
let oneMonthAgo = new Date( //获取一个月之前的时间
now.getFullYear(),
now.getMonth() - 1, //获取上一个月
now.getDate() + 1 //将多算的一天减掉
);
return (
time.getTime() > nowData.getTime() - 1000 //可以选择到今天的xxx:xxx:xxx:23:59:59,只有的全部disabled
|| time.getTime() < oneMonthAgo.getTime() //小于一个月的全部disabled掉
);
}
},
}
}
}
效果图如下:
更多推荐
所有评论(0)