element-ui 中日期时间选择器限制时间的可选范围

vue element-ui 中日期时间选择器限制可选范围

• 通过Picker Options 中的 disabledDate 设置禁用状态，参数为当前日期，要求返回 Boolean 来进行设定

<el-form-item label="活动开始时间" prop="starttime">
  <el-date-picker clearable size="small" style="width: 200px"
    v-model="form.starttime"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="选择活动开始时间"
    :picker-options="pickerOptions0">
  </el-date-picker>
</el-form-item>
<el-form-item label="活动结束时间" prop="endtime">
  <el-date-picker clearable size="small" style="width: 200px"
    v-model="form.endtime"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="选择活动结束时间"
    :picker-options="pickerOptions1">
  </el-date-picker>
</el-form-item>
<el-form-item label="报名截止时间 " prop="regdeadline">
  <el-date-picker clearable size="small" style="width: 200px"
    v-model="form.regdeadline"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="选择报名截止时间 "
    :picker-options="pickerOptions2">
  </el-date-picker>
</el-form-item>

• 在data 中进行判断即可

      // 设置只能选择当前日期之后的日期（不可以选择当天）
      pickerOptions0: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() ; // 不可以选择当天
          //  return time.getTime() < Date.now() - 8.64e7; // 可以选择当天
        },
      },
      // 活动结束时间
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.form.starttime) {
            return time.getTime() < new Date(this.form.starttime).getTime();
          } else {
            // 如果没有选择活动开始日期，则为禁用状态
            return true
          }
        },
      },
      // 报名截止时间
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.form.starttime) {
            return time.getTime() > new Date(this.form.starttime).getTime() - 1*24*60*60*1000;
          } else {
            // 如果没有选择活动开始日期，则为禁用状态
            return true

          }
        },
      },