el-date-picker 时间日期格式,选择范围限制

  背景:ElementUI的 el-date-picker 使用时,有时候想要限制用户选择的时间范围,但是用的是datetimerange类型的选择器,不想单独写两个起始的选择器。我发现网上的方案大部分都是单独写两个,个别使用datetimerange的选择器说的也不是很清楚,也有一些bug,这里贴出我的解决办法供大家参考;

  使用picker-options属性的disabledDate去控制范围。返回true代表禁止,就无法点击选择器的确认按钮。

 

复制代码
<el-date-picker
     :picker-options="pickerOptions"
      size="medium"
      v-model="searchTime"
      value-format="yyyy-MM-dd HH:mm:ss"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
></el-date-picker>
复制代码
复制代码
data() {
    return {
      maxDate: null,
      minDate: null,
      pickerOptions: {
     // 当我们选择日期时的回调方法。返回两个日期的最大值和最小值,第一次返回一个值,第二次返回两个值 onPick: ({ maxDate, minDate }) => {
      //当我们选择两个值的时候,就认为用户已经选择完毕 if (maxDate != null && minDate != null) { this.maxDate = maxDate; this.minDate = minDate; } }, disabledDate: time => { let maxDate = this.maxDate; let minDate = this.minDate; if (maxDate != null && minDate != null) { let days = maxDate.getTime() - minDate.getTime();
       //计算完之后必须清除,否则选择器一直处于禁止选择的状态 this.maxDate = null; this.minDate = null; return parseInt(days / (1000 * 60 * 60 * 24)) > 30; } else { //设置当前时间后的时间不可选 return time.getTime() > Date.now(); } } } }; },
复制代码

当我们选择的范围超过30天时,确认按钮无法点击

 

 当小于或等于30天时,可以确认

 

posted @   房东的Tom  阅读(12398)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示