当前位置:   article > 正文

ElementUI的DateTimePicker组件添加验证规则以及限制选择范围_el-date-picker 添加 rules

el-date-picker 添加 rules

场景

DateTimePicker是ElementUI的日期和时间共存的选择器。

有时需要限制选择器的选择范围。

效果

实现

实现需要使用组件的picker-option属性,具体参照官方文档:

http://element-cn.eleme.io/#/zh-CN/component/datetime-picker#datetimepicker-ri-qi-shi-jian-xuan-ze-qi

picker-option是object类型。

Picker Options

 

参数说明类型可选值默认值
shortcuts设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表Object[]
disabledDate设置禁用状态,参数为当前日期,要求返回 BooleanFunction
firstDayOfWeek周起始日Number1 到 77

注意disabledDate这个参数的使用,参数为当前日期,要求返回是Boolean,类型是Function。

举例

添加验证规则

控件显示:

  1. <el-form-item label="支付截止日期:" prop="finalPayTime">
  2.               <el-date-picker
  3.                 v-model="demandBid.finalPayTime" format="yyyy-MM-dd HH:mm"
  4.                 type="datetime"
  5.                 placeholder="支付截止日期" :picker-options="pickerOptions5">
  6. </el-date-picker>

其中:picker-options="pickerOptions5" 所以在return中添加:

 pickerOptions5: {},

注意prop属性是 finalPayTime

在rules中添加验证规则:

  1.   rules: {
  2.           finalPayTime: [
  3.             {required: true, message: '请选择支付截止日期'},
  4.             {validator: checkFinalPayTime, trigger: 'blur' }
  5.           ],

执行验证方法:checkFinalPayTime

在data中声明方法:

  1. var checkFinalPayTime = (rule, value, callback) => {
  2.         //var valueDate = moment(value).format('YYYY-MM-DD')
  3.         if (new Date(value) > new Date(this.demandBid.goUpTime)) {
  4.           return callback(new Error('支付截止日期必须早于去程起飞时间'));
  5.         }else if(new Date(value) <new Date()){
  6.           return callback(new Error('选择的支付截止日期无效'));
  7.         }else{
  8.           callback();
  9.         }
  10.       };

限制选择范围

在此页面的created方法中执行初始化时间控件的操作,即在加载完后就执行相应的方法。

  1. export default {
  2.     created() {
  3.    
  4.         this.initDateTimePicker(demandObj);
  5.  
  6.     },

如果有多个日期选择空间,则在initDateTimePicke方法中依次声明

  1.  methods: {
  2.       /**
  3.        * 初始化日期控件配置
  4.        * */
  5.       initDateTimePicker(demandObj) {
  6.         this.initGoUpTime(demandObj);
  7.         this.initGoDownTime(demandObj);
  8.         this.initReturnUpTime(demandObj);
  9.         this.initReturnDownTime(demandObj);
  10.         this.initFinalPayTime(demandObj);
  11.         this.initFinalOutTicketTime(demandObj);
  12.       },

这里以 this.initFinalPayTime(demandObj);为例

  1.  /**
  2.        * 支付截止日期控件配置
  3.        * @param demandObj
  4.        */
  5.       initFinalPayTime(demandObj) {
  6.         this.pickerOptions5 = Object.assign({}, this.pickerOptions5, {
  7.           disabledDate: (time) => {
  8.             if (demandObj.goStartTime != null && demandObj.goStartTime != undefined && demandObj.goStartTime != '') {
  9.               if ( new Date(demandObj.goStartTime).getTime() > Date.now()) {
  10.                 return new Date(demandObj.goStartTime).getTime() < time.getTime() ||   new Date() > time.getTime() + 3600 * 1000 * 24;
  11.               } else {
  12.                 return new Date() > time.getTime() + 3600 * 1000 * 24
  13.               }
  14.             } else {
  15.               return new Date() > time.getTime() + 3600 * 1000 * 24
  16.             }
  17.           }
  18.         })
  19.       },

注意:

比较时间时要用getTime()来获取毫秒数比较。

要将字符床时间放在new Date()去转换为时间格式。

注意disabledDate返回是Boolean,即要选择当前时间之后,就要小于当前时间而不是大于。

在 time.getTime() + 3600 * 1000 * 24加一天是让当天可选。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/426268
推荐阅读
相关标签
  

闽ICP备14008679号