element中关于选择el-date-picker日期和el-time-picker时间范围的限制（:picker-options=“pickerOptions“）

最新推荐文章于 2025-09-11 04:00:09 发布

原创

最新推荐文章于 2025-09-11 04:00:09 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍了在Element UI中使用`el-date-picker`和`el-time-picker`时如何设置时间范围限制，包括时间间隔不超过31天、禁止选择今日之前日期、按需求定制日期范围以及时间选择器的可选范围限制，确保用户在指定范围内进行选择。

实际业务中经常会有选择对应的时间和日期，但是考虑到用户操作的不确定性，所以我们在写整个时候，会给出一个明确是时间范围限制，一般都是通过 picker-options 这个对象进行配置

1.限制时间间隔不能大于31天

:picker-options="pickerOptions"


  <el-date-picker
          style="width:250px"
          v-model="pickerTime"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >>
   </el-date-picker>