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

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

具体实现如下:

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`,
      },

disabledDate 用来设置日期的限制,return 的部分就是禁止选中的部分

selectableRange用来限制可选的时分秒时间段

2、设置校验规则:

(1)在el-form的校验规则里面定义validator(校验方法)

rules: {
        releaseTime: [
          { required: true, message: "请输入预发布时间", trigger: "blur" },
          { validator: this.checkReleaseTime, trigger: "blur" },
        ]
      },

(2)在methods里面定义这个 方法

    checkReleaseTime (rule, value, callback) {
        if(new Date(value) < new Date()){
          return callback(new Error('预发布时间必须晚于当前时间'))
        }else {
          callback()
        }
      },

搞定!

  • 5
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值