微客导航 » 文章资讯 » element-ui 限制日期选择的方法(datepicker)

element-ui 限制日期选择的方法(datepicker)

2023-09-12 18:46:05 316

Element-UI是饿了么前端团队推出的一款基于Vue.js2.0的桌面端UI框架，手机端有对应框架是MintUI。

需求场景如下：

指定起止日期，后选的将会受到先选的限制
不同的日期选择器，不过也存在关联关系

实现方法不难，利用了change事件，动态改变picker-options中的disableDate即可。

查看Demo

Template

Script

varMain={
data(){
return{
pickerOptionsStart:{},
pickerOptionsEnd:{},
startDate:'',
endDate:'',
};
},
methods:{
changeStart(){
this.pickerOptionsStart=Object.assign({},this.pickerOptionsStart,{
disabledDate:(time)=>{
returntime.getTime()>this.endDate
}
})
},
changeEnd(){
this.pickerOptionsEnd=Object.assign({},this.pickerOptionsEnd,{
disabledDate:(time)=>{
returntime.getTime()
Style
@importurl("//unpkg.com/element-ui@2.3.8/lib/theme-chalk/index.css");

.block{
margin-top:10px;
}


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

element-ui 限制日期选择的方法(datepicker)

热门推荐

随机推荐