2021/08/24 elementui DateTimePicker日期选择器不能选择当前时间之前

最新推荐文章于 2024-06-12 12:05:59 发布

原创

最新推荐文章于 2024-06-12 12:05:59 发布 · 4.1k 阅读

11 ·

CC 4.0 BY-SA版权

本文探讨了在用户表单中如何使用饿了么DateTimePicker插件限制时间选择，提供了三种方法来确保时间范围仅限于当前时间之后。第一种方法通过验证和提示优化，但触发时机有误；第二种方法实时替换过早时间；第三种尝试禁用未来时分秒，但存在局限。寻求禁用特定时间点后的时分秒选择建议。

背景
–用户表单选择未来动作时，限定一个时间范围，只能选择当前时间之后的日期

–用的饿了么 DateTimePicker插件，日期范围的控制好实现，但是时间范围一直没解决，弄了三种方法，都有瑕疵

在这里插入图片描述

解决方法
1.最优选项：日期OK，时间范围给提示

–*核心代码

//表单 template
<el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="活动开始时间（开始前活动不可见）" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
</el-form>

//data这里写验证规则
var validateDate = (rule, value, callback) => {
      if (value) {
        let start = new Date(this.form.startTime).getTime();
        if (start < Date.now()) {
          callback(new Error("开始时间要大于当前时间"));
          console.log("333");
          //这样直接更新是没有提示的