element日期选择器只显示开始日期结束日期之间的日期_el-date-picker type="daterange" 值显示开始日期,没有结束日期-CSDN博客

该代码片段展示了如何在Vue.js应用中使用ElementUI的日期选择器组件（el-date-picker）。它创建了一个日期范围选择器（daterange）并关联到`form.planDate`，然后根据选定的日期范围动态禁用日期选择器（fillTime）中的日期，确保选择的日期在开始和结束日期之间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


        <el-form-item label="开始结束日期" prop="planDate">
          <el-date-picker value-format="yyyy-MM-dd" v-model="form.planDate" style="width: 90%;" type="daterange"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开始结束日期之间的日期" prop="fillTime">
          <el-date-picker v-model="form.fillTime" :picker-options="pickerOptions" value-format="yyyy-MM-dd" type="date"
            placeholder="请选择日期" style="width: 90%;"  >
          </el-date-picker>
        </el-form-item>

  data() {
    return {
      form: {
        planDate: [],
        fillTime：null,
      },
       pickerOptions: {
        disabledDate: (time) => {
          if (this.form.planDate.length !== 0) {
            const start = new Date(Number(this.form.planDate[0].split('-')[0]), Number(this.form.planDate[0].split('-')[1]) - 1, Number(this.form.planDate[0].split('-')[2])); // 月份从0开始计算，所以5月要写成4月
            const end = new Date(Number(this.form.planDate[1].split('-')[0]), Number(this.form.planDate[1].split('-')[1]) - 1, Number(this.form.planDate[1].split('-')[2]));;
            return time.getTime() < start.getTime() || time.getTime() > end.getTime();
          } else {
            return time.getTime()
          }
        }
      },
	}
}