时间选择器限制选择范围

 // 饿了么组件时间选择器限制选择时间范围
  <el-date-picker
        :picker-options="pickerOptions1"
         width="400"
         size="small"
         v-model="goods.advance_time"
         type="datetimerange"
         value-format="yyyy-MM-dd HH:mm:ss"
         range-separator="至"
         start-placeholder="开始日期"
         end-placeholder="结束日期">
 </el-date-picker>
  pickerOptions1:{
          disabledDate:(time) => {
               return  time.getTime() < new Date(this.goods.advance_time[0]).getTime() || time.getTime() > new             Date(this.goods.advance_time[1]).getTime();
          }
      },
### Layui 日期选择 设置时间范围限制 在 Layui 框架中,可以通过 `laydate.render` 方法配置参数来实现对日期选择的时间范围限制。具体来说,可以利用 `min` 和 `max` 参数分别设定最早时间和最晚时间。 对于希望设置一个具体的起始时间和结束时间的情况,下面是一个完整的 JavaScript 实现案例: ```javascript // 假设页面中有两个输入框用于表示开始时间和结束时间的选择 document.querySelectorAll('.start-time, .end-time').forEach(function(elem){ laydate.render({ elem: elem, type: 'datetime', done: function(value, date){ // 当选择了某个时间点触发此事件 if (elem.classList.contains('start-time')){ document.querySelector('.end-time').setAttribute( 'lay-min', value); // 更新结束时间的最小值为当前选中的开始时间 } else { document.querySelector('.start-time').setAttribute( 'lay-max', value); // 更新开始时间的最大值为当前选中的结束时间 } }, trigger: 'click' }); }); ``` 上述代码片段展示了如何通过监听 `done` 回调函数,在每次用户完成一次时间选择之后更新另一个时间选择的有效区间[^1]。 为了确保结束时间总是大于等于开始时间,还可以进一步优化逻辑处理部分,比如当重新设置了新的开始时间后,如果它超过了现有的结束时间,则自动调整结束时间为新选定的开始时间加上一定偏移量;反之亦然。 另外需要注意的是,如果想要更精细地控制可以选择的具体时间段(例如只允许未来几天内),则可以直接给 `min/max` 赋予特定的时间戳字符串或 Date 对象实例[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值