ElementUI的DateTimePicker组件添加验证规则以及限制选择范围

你的名字 2023-10-18 11:32 9阅读 0赞

### 场景 ###

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

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

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 实现 ###

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

[http://element-cn.eleme.io/\#/zh-CN/component/datetime-picker\#datetimepicker-ri-qi-shi-jian-xuan-ze-qi][http_element-cn.eleme.io_zh-CN_component_datetime-picker_datetimepicker-ri-qi-shi-jian-xuan-ze-qi]

picker-option是object类型。

#### Picker Options ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>shortcuts</td> 
   <td>设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表</td> 
   <td>Object[]</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>disabledDate</td> 
   <td>设置禁用状态，参数为当前日期，要求返回 Boolean</td> 
   <td>Function</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>firstDayOfWeek</td> 
   <td>周起始日</td> 
   <td>Number</td> 
   <td>1 到 7</td> 
   <td>7</td> 
  </tr> 
 </tbody> 
</table>

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

### 举例 ###

#### 添加验证规则 ####

控件显示：

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

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

pickerOptions5: {},

注意prop属性是 finalPayTime

在rules中添加验证规则：

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

执行验证方法:checkFinalPayTime

在data中声明方法：

#### 限制选择范围 ####

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

export default {
        created() {
       
            this.initDateTimePicker(demandObj);
     
        },

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

methods: {
          /**
           * 初始化日期控件配置
           * */
          initDateTimePicker(demandObj) {
            this.initGoUpTime(demandObj);
            this.initGoDownTime(demandObj);
            this.initReturnUpTime(demandObj);
            this.initReturnDownTime(demandObj);
            this.initFinalPayTime(demandObj);
            this.initFinalOutTicketTime(demandObj);
          },

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

/**
           * 支付截止日期控件配置
           * @param demandObj
           */
          initFinalPayTime(demandObj) {
    
            this.pickerOptions5 = Object.assign({}, this.pickerOptions5, {
              disabledDate: (time) => {
                if (demandObj.goStartTime != null && demandObj.goStartTime != undefined && demandObj.goStartTime != '') {
                  if ( new Date(demandObj.goStartTime).getTime() > Date.now()) {
                    return new Date(demandObj.goStartTime).getTime() < time.getTime() ||   new Date() > time.getTime() + 3600 * 1000 * 24;
                  } else {
                    return new Date() > time.getTime() + 3600 * 1000 * 24
                  }
                } else {
                  return new Date() > time.getTime() + 3600 * 1000 * 24
                }
              }
            })
    
          },

注意：

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

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

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

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

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181121160242674.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[http_element-cn.eleme.io_zh-CN_component_datetime-picker_datetimepicker-ri-qi-shi-jian-xuan-ze-qi]: http://element-cn.eleme.io/#/zh-CN/component/datetime-picker%23datetimepicker-ri-qi-shi-jian-xuan-ze-qi