介绍 & lt; el-date-picker
,,,,,,,,,v模型=癴ormInline.inventoryDate"
,,,,,,,,,类型=癲ate"
,,,,,,,,,=岸云雛ight"
,,,,,,,,,占位符=扒胙≡袢掌凇?
,,,,,,,,,:picker-options=皃ickerOptions"
,,,,,,,,,value-format=皔yyy-MM-dd"
,,,,,,,,,格式=皔yyy-MM-dd"
,,,,,,,,,@change=癱hangeDate"
,,,,,,,,在& lt;/el-date-picker>
,,,,,,,,& lt; el-time-picker
,,,,,,,,,v模型=癴ormInline.inventoryDateTime"
,,,,,,,,,类型=癲ate"
,,,,,,,,,=岸云雛ight"
,,,,,,,,,占位符=扒胙≡袷奔洹?
,,,,,,,,,:picker-options=皗
,,,,,,,,,,selectableRange: this.startTimeRange
,,,,,,,,,},
,,,,,,,,,@change=癱hangeTime"
,,,,,,,,,value-format=癏H: mm: ss"
,,,,,,,,,格式=癏H: mm: ss"
,,,,,,,,在& lt;/el-time-picker> 数据(){
返回{
pickerOptions: {
,,,disabledDate:, time =祝辞,{
,,,,return time.getTime (), & lt;, Date.now(),安康;3600年,*,1000,* 24
,,,},
,,},
}
}，
看:{
& # 39;才能formInline.inventoryDate& # 39;: {
,才能深:没错,
,,处理程序(newValue, oldValue), {
,,,如果(newValue) {
,,,,let nowDate =,。美元options.filters [& # 39; sendTimeDate& # 39;] (new 日期().getTime() + 60 * 1000);//,一分钟之后的时间(我是因业务要求,这里可以随意调整时间)
,,,,let dt =, nowDate.split (“,“);
,,,,let st =, & # 39; & # 39;;
,,,,如果(newValue.split (“,“) [0],==, dt [0]) {
,,,,,//,是今天,选择,的时间开始为此刻的时分秒
,,,,,st =, dt [1];
,,,,其他}{
,,,,,//,明天及以后从0时开始
,,,,,st =, & # 39;就是# 39;;
,,,,}
,,,,this.startTimeRange =, st +, & # 39;,安康;23:59:59& # 39;;
,,,,//console.log (this.startTimeRange)
,,,,//例如:如果今天此刻时间为10:41:40 则选择时间范围为:11:41:40 作用;23:59:59
,,,,,,//否则为:就是神;23:59:59
,,,}
,,},
,,}
}, & lt; el-date-picker
,,,,,,,,类=癲ateClass"
,,,,,,,,v模型=癮a"
,,,,,,,,类型=癲atetime"
,,,,,,,,:picker-options=皃ickerOptions"
,,,,,,,,占位符=?2点以后,
,,,,,,,,在
,,,,,,,& lt;/el-date-picker>
,数据(){
,,return {
,,,,aa:, & # 39; & # 39;
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下元素中TimePicker时间选择器禁用部分时间的案例,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
项目需求的是:选择日期和时间,只能选择当前时间以后的时间,禁用最小级别到分钟。
有两种选择
1。使用DateTimePicker日期时间选择器。
2。DatePicker和TimePicker组合使用
这里我是用的是第二种方法,最主要的属性是picker-options
思路:使用el-date-picker的picker-options属性中的disabledDate配置项,先禁用日期选择器,使其只能选择当前日期之后的日期,然后用看监控日期选择器所选日期如果是今天就使用el-time-picker的picker-options属性中selectableRange配置项,控制可选择时间。
注意:这种逻辑虽然可以禁用秒的选择,不过在前端页面中秒的选择是没有禁用的,当你选择之前秒时,会默认显示一分钟之后的秒数(我是因业务要求,通过上述代码你可以随意调整禁用的时间段)
呈现效果:
也把第一种方法总结一下吧
我禁用的日期是今天以前的,时间范围是22:00到02:00,直接上代码
