element 时间选择器 限制时分秒_Element时间控件限制时间选择范围

这篇博客介绍了如何在Vue.js中使用Element UI的日期选择器组件限制选择的日期范围,确保开始日期不晚于结束日期,并且结束日期不早于开始日期一年之后。通过设置`pickerOptions`的`disabledDate`属性实现动态禁用超出范围的日期。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Eleement范围时间选择,限制选择范围值,以下设置范围为一年

clearable

:picker-options="pickerOptions_start"

v-model="QueryForm.fwqqkssj"

type="date"

placeholder="选择日期">

clearable

:picker-options="pickerOptions_end"

v-model="QueryForm.fwqqjssj"

type="date"

placeholder="选择日期">

data() {

return {

pickerOptions_start: this.set_kssj_disabledDate(),

pickerOptions_end: this.set_jssj_disabledDate(),

}

}

methods:{

set_kssj_disabledDate(){

let _this = this;

return {

disabledDate:(time) => {

if(_this.QueryForm['fwqqjssj']){

let y = _this.QueryForm['fwqqjssj'].getFullYear()-1;

let m = _this.QueryForm['fwqqjssj'].getMonth() + 1;

let d = _this.QueryForm['fwqqjssj'].getDate();

return time.getTime() > _this.QueryForm['fwqqjssj'] || time.getTime() < new Date(y +'/'+ m +'/' + '/' + d);

}else{

return time.getTime() > Date.now();

}

}

}

},

set_jssj_disabledDate(){

let _this = this;

return {

disabledDate:(time) => {

if(_this.QueryForm['fwqqkssj']){

let y = _this.QueryForm['fwqqkssj'].getFullYear() + 1;

let m = _this.QueryForm['fwqqkssj'].getMonth() + 1;

let d = _this.QueryForm['fwqqkssj'].getDate();

//time.getTime为当前所点时间控件的时间值,返回true的时间则为禁止选择状态

return time.getTime() < _this.QueryForm['fwqqkssj'] || time.getTime() > new Date(y +'/'+ m +'/' + '/' + d);

}else{

return time.getTime() > Date.now();

}

}

}

},

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值