element el-date-picker限制时间选择范围

通过 :picker-options 属性设置范围:

<el-date-picker 
    class = "mydelayTime"
    v-model="form.secondPriceDelayTime" 
    type="datetime" 
    placeholder="选择日期时间"
    :start-placeholder="startPlaceholder" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions"
    @change = "changeSecondPriceDelayTime"
    >
</el-date-picker>
this.pickerOptions = {
  disabledDate: (time) => {
      return (time.getTime() < Date.now() + 8.64e7*3) //减去一天的时间代表可以选择同一天;
  },  
  // selectableRange:pickerDate ? `${hourRange}:${minRange}:${secondRange} - 23:59:59` : '00:00:00 - 23:59:59',
  
}

限制只能选择三天以后的时间:

this.pickerOptions = {
  disabledDate: (time) => {
      return (time.getTime() < Date.now() + 8.64e7*3) //减去一天的时间代表可以选择同一天;
  },  
  // selectableRange:pickerDate ? `${hourRange}:${minRange}:${secondRange} - 23:59:59` : '00:00:00 - 23:59:59',
  
}

如果需要限定,只能选择当前时间之后的时间,需要搭配 selectableRange 使用

选中了年月日,测试了onpick 方法没有触发,但是使用watch可以监听到当前选中了哪一天

### Element UI `el-date-picker` 组件 设置时间选择限制 为了实现特定的时间选择限制,比如只允许用户选择当前日期之后七天内的日期,在Element UI中的`el-date-picker`组件可以通过配置`picker-options`属性来达成这一目标。具体来说,通过定义`disabledDate`函数可以精确控制哪些日期是可以被选择的。 对于预计下单时间只能选择当前日期后7天的时间这种需求,可以在Vue实例的数据对象中定义一个名为`pickeroptions`的对象,该对象包含了一个用于禁用不符合条件日期的方法[^1]: ```javascript data() { return { form: { date6: '' }, pickeroptions: { disabledDate(time) { const today = new Date(); const sevenDaysLater = new Date(today); sevenDaysLater.setDate(sevenDaysLater.getDate() + 7); // 不可以选择早于今天的日期以及晚于今天加七天后的日期 return time.getTime() < today || time.getTime() > sevenDaysLater; } } }; } ``` 上述代码片段展示了如何利用JavaScript计算出未来第七日的具体时间戳,并将其作为比较标准之一;同时不允许选择当天之前的任何一天。这样就实现了仅能选择从明天起至一周内任意一日的效果。 另外一种场景下,如果想要设定可选月份或更复杂的日期范围,则可以根据实际情况调整`disabledDate`逻辑并应用到相应的模板标签上[^2]。 当涉及到区间选择器,默认值和其他高级选项时,也可以借助类似的思路去定制化满足不同业务逻辑的需求。例如设置初始的选择区间或者进一步细化不可选日期规则等操作都可以在此基础上扩展完成[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值