【vue】基于element-ui 开始日期 结束日期 可选范围控制

html

<template>
  <div>
    <el-col :span="8">
      <el-form>
        <el-form-item
          label="演练开始日期"
          prop="startTime"
          :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-date-picker
            v-model="addDrillRecordRow.startTime"
            class="baseInput"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            :picker-options="pickerOptionsStart"></el-date-picker>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :offset="1" :span="8">
      <el-form>
        <el-form-item
          label="演练结束日期"
          prop="endTime"
          :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-date-picker
            v-model="addDrillRecordRow.endTime"
            class="baseInput"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            :picker-options="pickerOptionsEnd"></el-date-picker>
        </el-form-item>
      </el-form>
    </el-col>
  </div>
</template>

script

<script>
  export default {
    name: 'Test',
    data() {
      return {
        // 时间限制，符合日期先后顺序的实际情况
        pickerOptionsStart: {
          disabledDate: time => {
            if (this.addDrillRecordRow.endTime) {
              return (
                time.getTime() > Date.now() - 8.64e6 ||
                time.getTime() > this.addDrillRecordRow.endTime /* 开始日期要在选择的结束日期之前 */
              )
            }
            // return time.getTime() < Date.now() - 8.64e7; /*今天及以后*/
            return time.getTime() > Date.now() - 8.64e6 /* 今天及之前，注意数字不一样 */
          }
        },
        pickerOptionsEnd: {
          disabledDate: time => {
            if (this.addDrillRecordRow.startTime) {
              return (
                time.getTime() > Date.now() - 8.64e6 ||
                time.getTime() < this.addDrillRecordRow.startTime /* 结束日期要在选择的开始日期之后 */
              )
            }
            return time.getTime() > Date.now() - 8.64e6 /* 今天及之前 */
          }
        },
        addDrillRecordRow: {
          startTime: '',
          endTime: ''
        }
      }
    }
  }
</script>

效果图

参考：https://blog.csdn.net/acoolgiser/article/details/106378033