vue2 + elementui 日期时间选择器禁止选择当前时间之前的日期及时间，并添加相应校验规则

最新推荐文章于 2025-06-30 20:49:31 发布

前端烤贝猿

最新推荐文章于 2025-06-30 20:49:31 发布

阅读量7.9k

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_57024354/article/details/122113125

项目里有这样一个需求：文章设置的预发布时间不得早于当前时间（包括日期和时分秒时间）。

具体实现如下：

1、在日期时间选择其中设置禁止选中（包括日期和时间）

（1）在html（template）中，通过:picker-options="endDateOpt"设置禁用方法

        <!-- 发布时间 -->
        <el-form-item label="发布时间" prop="releaseTime" required>
          <el-date-picker
            v-model="form.releaseTime"
            type="datetime"
            placeholder="选择时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="endDateOpt"
          >
          </el-date-picker>

（2）在 vue的data里面（注意，是data里面，不是methods）定义：

      endDateOpt: {
        disabledDate: (time) => {
          // 日期选择限制
          let oneDay = 60 * 60 * 24 * 1000;
          return time.getTime() < Date.now() - oneDay;
        },
        // selectableRange 用来限制时分秒的选择，这里要求只能选择当前时间之后到0点的时间点
        selectableRange: `${Date().split(" ")[4]} - 23:59:59`,
      },