el-datepicker限制日期选择范围

hjt_未来可期2025-12-10 13:58

问题：使用常规方法限制日期以后，发现被限制日的前一天不能选择，代码如下

javascript 复制代码

<el-date-picker
  v-model="aaa"
  type="daterange"
  size="mini"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :default-time="['00:00:00', '23:59:59']"
  :picker-options="pickerOptionsEnd"
>
</el-date-picker>
pickerOptionsEnd: {
  disabledDate: time => {
    return time.getTime() > new Date()
  }
},

使用上述方式实现发现有问题，比如今天9号，实际显示禁用的范围是10号及以后，实际选择的时候发现9号不可选。

后来发现，是限制了 :default-time="['00:00:00', '23:59:59']" 导致出现了问题，因为default-time 为选中的日期设置一个具体的时分秒，如果这个时间点超过了函数中定义的"当前时间"（精确到毫秒），就可能产生冲突，所以解决方案如下：

通过计算"今天 23:59:59"的时间戳作为截止点，确保设置了 default-time 为 '23:59:59' 的今天日期依然在允许范围内

最终解决方案：

javascript 复制代码

pickerOptionsEnd: {
  disabledDate: time => {
    return time.getTime() > new Date().setHours(23, 59, 59, 999)
  }
},