可以使用DateTimePicker组件的minDate和maxDate属性来限制可选的时间范围。具体代码如下:

<template>
  <div>
    <el-date-picker
      v-model="startDate"
      type="date"
      placeholder="选择开始日期"
      :picker-options="startPickerOptions"
    ></el-date-picker>
    <el-date-picker
      v-model="endDate"
      type="datetime"
      placeholder="选择结束日期"
      :picker-options="endPickerOptions"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
      startPickerOptions: {
        disabledDate: (time) => {
          if (!this.endDate) {
            return false;
          }
          return time.getFullYear() !== this.endDate.getFullYear();
        }
      },
      endPickerOptions: {
        disabledDate: (time) => {
          if (!this.startDate) {
            return false;
          }
          const minDate = new Date(this.startDate);
          minDate.setFullYear(minDate.getFullYear() + 1);
          return time < minDate;
        }
      }
    };
  }
};
</script>

在上面的代码中,我们使用了两个DateTimePicker组件,一个用于选择开始日期,另一个用于选择结束日期。在开始日期选择器中,我们使用了disabledDate函数来禁用那些不在可选范围内的日期。具体地,我们判断当前日期的年份是否与结束日期的年份相同,如果不同,则禁用该日期。在结束日期选择器中,我们同样使用了disabledDate函数,但这次的判断条件是当前日期是否小于开始日期加上一年,如果小于,则禁用该日期。

需要注意的是,我们在结束日期选择器中使用了minDate属性来限制可选的最小日期,而这个最小日期是根据开始日期加上一年来计算的。

element-ui中DateTimePicker 日期时间选择器只能选一年的时间根据用户选择的开始来决定开始时间代码怎么写

原文地址: https://www.cveoy.top/t/topic/b21M 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录