el-date-picker禁用当天之前的时间,element日期选择器禁用
本文主要介绍元素中TimePicker时间选择器的禁用部分(显示禁用到分钟)。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。下面让我们跟随边肖一起学习。
要求是：选择日期和时间，只选择当前时间之后的时间，并将最小级别禁用为分钟。
有两种选择。
1.使用DateTimePicker日期时间选择器。
2.DatePicker和TimePicker结合使用
这里我用的是第二种方法，主要属性是picker-options。
El-日期选择器
v-model= formin line . inventory date
type=date
align=右
Placeholder=请选择一个日期
:picker-options=pickerOptions
值格式=yyyy-MM-dd
format=yyyy-MM-dd
@change=changeDate
/El-日期选择器
El-时间选择器
v-model= formin line . inventory date time
type=date
align=右
Placeholder=请选择时间
:选取器选项={
selectableRange:this . start time range
}
@change=changeTime
值格式=HH:mm:ss
format=时：分：秒
/El-时间选择器
data(){
返回{
建议：{
禁用日期：时间={
return time . gettime()date . now()-3600 * 1000 * 24
},
},
}
},
观察：{
formInline.inventoryDate :
深：真的，
处理程序(新值，旧值){
if(新值){
让现在日期=这个。$ options . filters[ send time Date ](新日期()。getTime()60 * 1000)；//一分钟后的时间(本人因业务需要，可以随意调整这里的时间)
设dt=now date . split()；
设ST=“”；
if(new value . split()[0]==dt[0]){
//今天，选定的时间从此刻开始。
ST=dt[1]；
}否则{
//从明天零时开始及以后
ST= 00:00:00 ；
}
this . start time range=ST -23:59:59 ；
//console . log(this . start time range)
//比如今天的时间是10:41:40，那么时间范围就是11:41:40-23:59:59。
//否则：00:00:00- 23:59:59
}
},
}
},
思路：使用el-date-picker的picker-options属性中的disabledDate配置项，首先禁用日期选择器，使其只能选择当前日期之后的日期，然后用watch监视日期选择器选择的日期。如果是今天，使用el-time-picker的picker-options属性中的selectableRange配置项来控制可选时间。
注意：虽然此逻辑可以禁用秒的选择，但秒的选择在首页中是不禁用的。选择前一秒时，默认显示一分钟后的秒数(因为业务需要，可以通过上面的代码任意调整禁用时间段)。
渲染效果：
我们也总结一下第一种方法。
我的停用日期在今天之前，时间范围是22:00-02:00，可以直接上传代码。
El-日期选择器
class=dateClass
v-model=aa
type=datetime
:picker-options=pickerOptions
Placeholder=点以后
style=宽度：100%
/El-日期选择器
data() {
返回{
aa: ，
建议：{
//限制时间
可选范围：[22: 00: 00-23: 59: 59 ， 00: 00: 00-02: 00: 00]，//在这里，还可以绑定一个变量来动态限制时间。
//限制日期
禁用日期：this.disabledDate
},
}
} ,
方法：{
禁用日期(时间){
return time . gettime()date . now()-3600 * 1000 * 24
}
}
关于禁用元素中TimePicker的部分时间(显示禁用到分钟)的这篇文章到此结束。有关禁用元素时间选择器兼职的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。