vue时间控件DatePicker,el-date-picker限制一个月范围
这篇文章主要介绍了日期选择器动态限制时间范围案例详解，本篇文章通过简要的案例，讲解了该项技术的了解与使用，以下就是详细内容，需要的朋友可以参考下
分为两种情况
1.开始时间和结束时间同一个框（限制只能本月)
2.开始时间和结束时间分开两个框（限制开始时间不能早于当前时间且结束时间不超过开始时间一星期)
情况一
//情况一原创版权声明：本文为微信_40998880原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。
//本文链接：https://博客。csdn。net/weixin _ 40998880/文章/详情/106272897
//html
埃尔-日期选择器
v-model=time
type=datetimerange
@change=datePickerChange
:picker-options=pickerOptions
范围分隔符=-
start-placeholder=开始日期
end-placeholder=结束日期
align=右
style= width:100%；
值-格式=yyyy-MM-dd HH:mm:ss 格式=yyyy-MM-dd HH:mm:ss
:default-time=[00:00:00 ， 23:59:59]
/El-日期选择器
//脚本
data(){
返回{
选择数据： ,
建议：{
//点击时，选择的是开始时间，也就是最小日期
onPick: ({ maxDate，minDate })={
这个。selectdata=mindate。gettime()
if (maxDate) {
//解除限制
this.selectData=
}
},
禁用日期：(时间)={
//是否限制的判断条件
如果(!this.isNull(this.selectData)) {
var日期=新日期(this.selectData)
//这里就是限制的条件，这里为大于或者小于本月的日期被禁用（尽量不使用这种方法，因为其他年份的本月也能进行选择，具体限制日期参考情况2)
return date.getMonth()新日期（时间)。getMonth() date.getMonth()新日期（时间)。getMonth()
}否则{
返回错误的
}
}
}
}
},
方法：{
//检查是否为空
isNull(值){
如果（值){
返回错误的
}
返回真实的
}
}
情况2
//情况2
//html
el-col :span=8
El-form-item prop=开始时间 label=预约开始时间：
埃尔-日期选择器
v-model=editForm.beginTime
type=datetime
占位符=选择开始时间
:选取器选项=选取器选项[0]
值-格式=yyyy-MM-dd HH:mm:ss
:default-time=defaultTime[0]
/El-日期选取器/El-表单-项目
/el-col
el-col :span=8
El-form-item prop=结束时间 label=预约结束时间：
埃尔-日期选择器
v-model=editForm.endTime
type=datetime
占位符=选择开始时间
:选取器选项=选取器选项[1]
值-格式=yyyy-MM-dd HH:mm:ss
:default-time=defaultTime[1]
/El-日期选取器/El-表单-项目
/el-col
//脚本
data(){
返回{
选择数据： ,
默认时间：[],
建议：[
{
禁用日期：时间={
const curDate=新日期()。getTime()；
常数日=14 * 24 * 3600 * 1000
const dateRegion=curDate day
返回（
时间。gettime()日期。现在()-8.64 E7
time.getTime() dateRegion
);
}
},
{
//限制结束时间为开始时间的一周后
禁用日期：时间={
//是否限制的判断条件
常数日期=新日期(这个。编辑表单。开始时间)；
如果(！this.isNull(日期)){
const day=7 * 24 * 3600 * 1000
const date region=date . gettime()day；
返回(
//禁用小于开始时间和开始时间后一周的日期。
新日期(时间)。getTime() dateRegion
新日期(时间)。getTime() date.getTime()
);
}否则{
返回false
}
}
}
],
}
},
方法：{
//检查它是否为空。
isNull(值){
如果(值){
返回false
}
返回true
},
//获取当前时间，选中时添加默认值
getNowTime() {
设d=新日期()；
让年、月、日、小时、分钟；
//当前时间十分钟后
d . settime(d . gettime()10 * 60 * 1000)；
[年、月、日、小时、分钟]=[
d.getFullYear()，
d.getMonth()，
d.getDate()，
d.getHours()，
d.getMinutes()
];
设hour 2=hour 1；
//选择开始时间时的默认值是当前时间之后的十分钟。
//选择结束时间时的默认值是当前时间之后的一小时十分钟。
this.defaultTime=[
小时:分钟:00 ，
小时2 :分钟:00
];
},
}
这就是这篇关于vue el-date-picker动态时间限制案例的详细说明。有关vue el-date-picker动态时间限制的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。