element 日期选择器,禁用部分日期

 需要使用element日期选择器(DatePicker 或 DateTimePicker)自带的 Picker Options的方法

以DateTimePicker 日期时间选择器为例

html:

<el-date-picker 
v-model="Time" 
type="daterange"    //这里用的是datarange的选择类型
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" 
:picker-options="pickerOptions" //绑定数据>

</el-date-picker>

js

此处的实例的可选择时间为当天到今年最后一天,可以在disabledDate里面自己定义。

data( ) {
    return {
        pickerOptions: {
          disabledDate: (time) => {
              //获取结束时间
              let eTime = new Date();
              eTime.setDate(0);
              eTime.setMonth(11);
              eTime.setHours(23);
              eTime.setSeconds(59);
              eTime.setMinutes(59);
              let endTime = Date.parse(eTime)

              return time.getTime() < Date.now() || time.getTime() > endTime ;//定义不可选时间
          }
        }
    }
}

如果是动态的固定时间(有点拗口,就是可变化的固定时间)

return time.getTime() < new Date(this.timeVal)
// timeVal 可以是一个通过v-model 绑定的动态数据

如果是跟当天有关的固定时间区间(例如可选前后一周内的日期)

 return time.getTime() < Date.now()-7*24*3600*1000 || time.getTime() >  Date.now()+7*24*3600*1000;
//通过Date.now()确定当前时间,并用7*24*3600*1000这种毫秒定义不可选时间段

关于时间格式的转化,可以参考中国标准时间、‘yyyy-MM-dd’格式时间转为时间戳 - 爱喝酸奶的吃货 - 博客园

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值