element ui time range selection

 

<template>
<el-form class="padder" ref="form" :model="formData" :rules="rules" label-width="130px" size="small">

  <el-form-item label="报名开始时间"  prop="registStartTime" :inline-message="true">
    <el-date-picker
      style="width: 50%;"
      v-model="formData.registStartTime"
      type="date"
      placeholder="选择日期"
      :picker-options="registrationTimeStart"
      value-format="yyyy-MM-dd"></el-date-picker>
  </el-form-item>

  <el-form-item label="报名结束时间" prop="registEndTime" :inline-message="true">
    <el-date-picker
      style="width: 50%;"
      v-model="formData.registEndTime"
      type="date"
      placeholder="选择日期"
      :picker-options="registrationTimeEnd"
      value-format="yyyy-MM-dd"></el-date-picker>
  </el-form-item>

  <el-form-item label="审核开始时间"  prop="auditStartTime" :inline-message="true">
    <el-date-picker
      style="width: 50%;"
      v-model="formData.auditStartTime"
      type="date"
      placeholder="选择日期"
      :picker-options="auditTimeStart"
      value-format="yyyy-MM-dd"></el-date-picker>
  </el-form-item>

  <el-form-item label="审核结束时间" prop="auditEndTime" :inline-message="true">
    <el-date-picker
      style="width: 50%;"
      v-model="formData.auditEndTime"
      type="date"
      placeholder="选择日期"
      :picker-options="auditTimeTimeEnd"
      value-format="yyyy-MM-dd"></el-date-picker>
  </el-form-item>

</el-form>
</template>

<script>
export default {
  name: 'time-form',

  props: {
    source: {
      type: Object
    },

    action: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      // 报名开始时间配置
      registrationTimeStart: {
        disabledDate: time => {
          const endDateVal = this.formData.registEndTime
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
        }
      },

      // 报名结束时间配置
      registrationTimeEnd: {
        disabledDate: time => {
          const beginDateVal = this.formData.registStartTime
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime()
          }
        }
      },

      // 审核开始时间配置
      auditTimeStart: {
        disabledDate: time => {
          const endDateVal = this.formData.auditEndTime
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
        }
      },

      // 审核结束时间配置
      auditTimeTimeEnd: {
        disabledDate: time => {
          const beginDateVal = this.formData.auditStartTime
          if (beginDateVal) {
            return (time.getTime() < new Date(beginDateVal).getTime()
            )
          }
        }
      },
      // 数据
      formData: {
        // 报名开始时间
        registStartTime: '',
        // 报名结束时间
        registEndTime: '',
        // 审核开始时间
        auditStartTime: '',
        // 审核结束时间
        auditEndTime: ''
      },
      // 验证
      rules: {
        registStartTime: [{ required: true, message: '请选择报名开始时间' }],
        registEndTime: [{ required: true, message: '请选择结束开始时间' }],
        auditStartTime: [{ required: true, message: '请选择审核开始时间' }],
        auditEndTime: [{ required: true, message: '请选择审核结束时间' }],
      }
    }
  },

}
</script>