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

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

具体实现如下：

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

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

        <!-- 发布时间 --><el-form-item label="发布时间" prop="releaseTime" required><el-date-pickerv-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()}},

搞定！

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

element-plus DateTimePicker 日期时间选择器禁止选择当日之前的日期
vue3使用element-plus的DateTimePicker 日期时间选择器组件时,禁止选择当日之前的日期. 在el-date-picker使用disabled-date: <el-dat ...
element 时间选择器禁止选择以前或以后的时间
<el-date-picker v-model="certificatetime" value-format="yyyy-MM-dd" :picker-o ...
iview+时间选择器+禁止选择事件
前言: iview的时间框禁止事件使用它自身的options:bbyfOptionsbbyfOptions:{//我这里限制是当前时间之后和两年前都不能选择disabledDate (date) { ...
antd 日期时间选择_antd日期选择器禁止选择当天之前的时间操作
使用disabledDate属性(不可选择的日期) 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current &&am ...
element的日期范围选择器快捷选择今日，昨日，本周，上周，本月，上个月，禁止选择当前日期之后的日期
element的日期范围选择器快捷选择今日,昨日,本周,上周,本月,上个月,禁止选择当前日期之后的日期 <template><div class="card-data&qu ...
ElementUI日期时间选择器禁止此刻之前的所有时间选择(精确到，时、分、秒)、pickerOptions、日期选择器范围选择
elementUI日期时间选择器范围(精确到,时.分.秒.
时间组件关于禁选时间的设置（禁选当前之前的时间、禁止选择某个范围之外的时间等）
1.前景开发项目的时候,用到了时间选择器,其中对禁止选择的时间上有好几个要求,现在项目完结,总结一下这几种禁止选择的情况 2.禁止选择的几种情况组件使用代码,disabledDate属性表示设置禁 ...
vue 日期选择器禁止点击今日之前的日期
vue中日期组件禁止点击今日之前的日期,不包括今日 <div class="block"><span class="demonstration" ...
Ant Design RangePicker 日期选择器不可选择今日或以后的日期, 最多可以选择31天.
首先先看看效果: 效果图: 默认是一直不可选择今日和以后的日期当选择了一个日期后, 将它的可选择区间限制在 31 天内, 并且下次选择时解除限制下面是代码示例, 里面的 props, state, ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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