vue+elementUI 关于日期选择器的disabledDate问题

 

关于结束时间不能大于开始时间的问题,在elementui里我们用官方提供的 disabledDate 选项来解决。 
HTML:给选择器加上:picker-options属性

//开始时间
<el-date-picker v-model="startDate"></el-date-picker>
//截止时间
<el-date-picker v-model="endDate" :picker-options="endDateOpt"></el-date-picker>


DATA: 
我这里就简略写下关键的。


data() {
    return {
        startDate: null,
        endDate: null,
        endDateOpt: {
            disabledData: (time) => {
                return time.getTime() < this.startDate;
            }
        }
    }
}


以上是单个选择框的,如果是daterange或datetimerange的话:

<el-date-picker v-model="value1" type="daterange" 
    :picker-options="pickerOptions">
</el-date-picker>
data() {
   return {
     value: '',
     pickerOptions2: {
         disabledDate: (time) => {
             return time.getTime() > new Date(2017, 11, 30) || time.getTime() < new Date(2017, 11, 11);//注意是||不是&&
         }
     }
   };
}

 

问题: (html5)element UI 的datePicker 怎么限制输入的范围呢?

描述:

1.element UI的datePicker 怎么确定日期的选择范围内,向后台的数据需要限制在某一段日期范围内,在element Ui 的日期范围内


解决方案1:

pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },



disabledDate: (time) => {
    let beginDateVal = this.addJobForm.beginDate;
    if (beginDateVal) {
        return time.getTime() < beginDateVal;
    }
}


解决方案2:

http://element.eleme.io/#/zh-...
http://jsfiddle.net/api/post/...

设置picker-options的disabledDate,返回true被禁用。
涉及到具体的项目,这种问题最好到GitHub上去问。

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值