vue el-date-picker动态限制时间范围案例详解_vue.js

这篇文章主要介绍了vue el-date-picker动态限制时间范围案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

分为两种情况

1.开始时间和结束时间同一个框（限制只能本月）

2.开始时间和结束时间分开两个框（限制开始时间不能早于当前时间且结束时间不超过开始时间一星期）

 情况1

//情况1 原创版权声明：本文为weixin_40998880原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
//本文链接：https://blog.csdn.net/weixin_40998880/article/details/106272897

//html
<el-date-picker
v-model=\”time\”
type=\”datetimerange\”
@change=\”datePickerChange\”
:picker-options=\”pickerOptions\”
range-separator=\”-\”
start-placeholder=\”开始日期\”
end-placeholder=\”结束日期\”
align=\”right\”
style=\”width:100%;\”
value-format=\”yyyy-MM-dd HH:mm:ss\” format=\”yyyy-MM-dd HH:mm:ss\”
:default-time=\”[\’00:00:00\’,\’23:59:59\’]\”>
</el-date-picker>

//script

data(){
return {
selectData: \’\’,
pickerOptions: {
// 点击时，选择的是开始时间，也就是minDate
onPick: ({ maxDate, minDate }) => {
this.selectData = minDate.getTime()
if (maxDate) {
// 解除限制
this.selectData = \’\’
}
},
disabledDate: (time) => {
// 是否限制的判断条件
if (!this.isNull(this.selectData)) {
var date = new Date(this.selectData)
// 这里就是限制的条件，这里为大于或者小于本月的日期被禁用(尽量不使用这种方法，因为其他年份的本月也能进行选择，具体限制日期参考情况2)
return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
} else {
return false
}
}
}
}
},
methods:{
// 检查是否为空
isNull(value) {
if (value) {
return false
}
return true
}
}

情况2

//情况2
//html
<el-col :span=\”8\”>
<el-form-item prop=\”beginTime\” label=\”预约开始时间：\”>
<el-date-picker
v-model=\”editForm.beginTime\”
type=\”datetime\”
placeholder=\”选择开始时间\”
:picker-options=\”pickerOptions[0]\”
value-format=\”yyyy-MM-dd HH:mm:ss\”
:default-time=\”defaultTime[0]\”
>
</el-date-picker> </el-form-item
></el-col>
<el-col :span=\”8\”
><el-form-item prop=\”endTime\” label=\”预约结束时间：\”>
<el-date-picker
v-model=\”editForm.endTime\”
type=\”datetime\”
placeholder=\”选择开始时间\”
:picker-options=\”pickerOptions[1]\”
value-format=\”yyyy-MM-dd HH:mm:ss\”
:default-time=\”defaultTime[1]\”
>
</el-date-picker> </el-form-item
></el-col>

//script
data(){
return {
selectData: \’\’,
defaultTime: [],
pickerOptions: [
{
disabledDate: time => {
const curDate = new Date().getTime();
const day = 14 * 24 * 3600 * 1000;
const dateRegion = curDate + day;
return (
time.getTime() < Date.now() – 8.64e7 ||
time.getTime() > dateRegion
);
}
},
{
//限制结束时间为开始时间的一周后
disabledDate: time => {
// 是否限制的判断条件
const date = new Date(this.editForm.beginTime);
if (!this.isNull(date)) {
const day = 7 * 24 * 3600 * 1000;
const dateRegion = date.getTime() + day;
return (
//禁用小于开始时间和大与开始时间一周后的日期
new Date(time).getTime() > dateRegion ||
new Date(time).getTime() < date.getTime()
);
} else {
return false;
}
}
}
],
}
},
methods:{
// 检查是否为空
isNull(value) {
if (value) {
return false
}
return true
},
//获得当前时间并添加选中时的默认值
getNowTime() {
let d = new Date();
let year, month, day, hour, minute;
//当前时间的十分钟后
d.setTime(d.getTime() + 10 * 60 * 1000);
[year, month, day, hour, minute] = [
d.getFullYear(),
d.getMonth(),
d.getDate(),
d.getHours(),
d.getMinutes()
];
let hour2 = hour + 1;
//选中开始时间时的默认值为当前时间的十分钟后
//选中结束时间时的默认值为当前时间的一个小时十分钟后
this.defaultTime = [
hour + \”:\” + minute + \”:00\”,
hour2 + \”:\” + minute + \”:00\”
];
},
}

到此这篇关于vue el-date-picker动态限制时间范围案例详解的文章就介绍到这了,更多相关vue el-date-picker动态限制时间范围内容请搜索3399IT网以前的文章或继续浏览下面的相关文章希望大家以后多多支持3399IT网！

本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com