elementui时间选择器时间范围选择限制

<div class="date">
            <el-form-item prop="customTime">
              <el-date-picker
                v-model="ruleForm.customTime"
                size="small"
                type="datetime"
                :placeholder="$t('seckill.startTime')"
                default-time="00:00:00"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="startDatePicker"
                @change="dateTimeChange('start')"
                :disabled="status===1"
              ></el-date-picker>
            </el-form-item>
            <div style="margin-left: 30px;margin-right: 8px;">{{$t('seckill.to')}}</div>
            <el-form-item prop="customTimeEnd">
              <el-date-picker
                v-model="ruleForm.customTimeEnd"
                size="small"
                type="datetime"
                :placeholder="$t('seckill.endTime')"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="23:59:59"
                :picker-options="endDatePicker"
                @change="dateTimeChange('end')"
              ></el-date-picker>
            </el-form-item>
          </div>
 
 
// data 中
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
 
 
// methods中
// 有效期时间限制
    beginDate () {
      var that = this
      return {
        disabledDate (time) {
          if (that.ruleForm.customTimeEnd) {
            return new Date(that.fruleForm.customTimeEnd).getTime() < time.getTime() || time.getTime() > new Date('2037-12-31 23:59:59').getTime() // 如果结束时间不为空,则小于结束时间
          } else {
            return time.getTime() > new Date('2037-12-31 23:59:59').getTime()
          }
        }
      }
    },
    processDate () {
      var that = this
      return {
        disabledDate (time) {
          if (that.ruleForm.customTime) {
            return new Date(that.ruleForm.customTime).getTime() > time.getTime() || time.getTime() > new Date('2037-12-31 23:59:59').getTime() // 如果开始时间不为空,则结束时间大于开始时间
          } else {
            return time.getTime() > new Date('2037-12-31 23:59:59').getTime() // 开始时间不选时,结束时间最大值小于2038年
          }
        }
      }
    },
posted @ 2020-10-26 13:07  Godfi  阅读(432)  评论(0编辑  收藏  举报