ElementUI日期时间选择器限制时间范围,禁止此刻之前的所有时间选择(精确到，时、分、秒)、pickerOptions、日期选择器范围选择

李泽举

已于 2023-08-20 16:00:53 修改

阅读量1.2w

点赞数 5

于 2021-04-26 22:21:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45895806/article/details/116175810

版权

本文介绍如何在使用Element UI的日期选择器时，确保选择的时间必须大于当前时间，通过自定义`disabledDate`方法实现精确到年月日时分秒级别的筛选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求:可选择的时间大于当前时间,不符合条件的全部禁用

以下实现方式可精确到年、月、日、时、分、秒

HTML

<el-form-item label="盘点开始时间" prop="checkStartTime">
      <el-date-picker
        type="datetime"
        placeholder="请选择开始时间"
        style="width: 100%"
        clearable
        format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
        v-model="inventoryEdit.checkStartTime"
      ></el-date-picker>
 </el-form-item>

data里

// 选择开始时间大于等于当前时间
      pickerOptions: {
   
        disabledDate(time) {
   
          const dateTime = new Date();
          const startDateTime = dateTime.setDate(dateTime.getDate() - 1);
          const endDateTime = dateTime.s