el-date-picker日期选择器动态设置日期

dy17172024-11-06 14:46

需求：选择开始时间，或者在开始时间已存在的情况下；结束时间下拉日期选择框展示从开始日期展示；而不是当前日期，并且结束时间下拉框日期要禁用开始时间之前的日期。

html 复制代码

          <el-form-item label="开始时间" prop="beginTime">
            <!-- :picker-options="pickerOptions" -->
            <el-date-picker
              v-model="formData.beginTime"
              v-elDateFormat
              editable
              value-format="timestamp"
              type="date"
              placeholder="请选择日期"
              clearable
              style="width: 180px"
              :disabled="formData.stageNature== 'point'"
              @change="changeEndTime"
            />
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="formData.endTime"
              v-elDateFormat
              editable
              value-format="timestamp"
              type="date"
              placeholder="请选择日期"
              clearable
              style="width: 180px"
              :disabled="formData.stageNature == 'point'"
              :picker-options="pickerOptions"
            />
          </el-form-item>

javascript 复制代码

      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < this.formData.beginTime
        }
      },

这样写，只能让结束时间下拉框日期，开始日期之前的日期都禁用；但并没有实现从12-13号的日期展示，翻看文档查找，default-value这个属性可以设置显示的时间。

给结束时间添加这个属性： :default-value="defaultDateVal"

监听开始时间的变化，然后给defaultDateVal赋值

javascript 复制代码

  watch: {
    'formData.beginTime': {
      handler(newValue, oldValue) {
    if (newValue.beginTime && newValue.beginTime !== '') {
           if (newValue.beginTime) {
            this.defaultDateVal = newValue.beginTime
          }
        } else {
          this.formData.beginTime = ''
          this.defaultDateVal = ''
        }
      },
      immediate: true,
      deep: true
    }
  },
//在开始时间发生改变时，清空endTime 
    changeEndTime(time) {
      this.formData.endTime = ''
    },