element-ui的时间跨度控件el-date-picker如何分别限制起止时间选择范围？

Question

element-ui的时间跨度控件el-date-picker如何分别限制起止时间选择范围？

qngyun1029

95832188270

发布于
11 月 23 日广东

时间跨度控件el-date-picker，选择时间跨度的时候需要分别限制起止时间的选择范围，该如何改造？

element-ui

阅读 252

AI BotBETA

在 Element UI 中，你可以使用 `el-date-picker` 组件的 `picker-options` 属性来分别限制起止时间的选择范围。以下是一个示例代码，展示了如何分别限制起止时间的选择范围：

<el-date-picker
  v-model="value1"
  type="daterange"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :picker-options="pickerOptions">
</el-date-picker>

</div>
</template>

return {
  value1: [],
  pickerOptions: {
    shortcuts: [],
    disabledDate(time) {
      const start = new Date(); // 设置起始时间，这里以当前时间为例
      const end = new Date(start.getTime() + 3600 * 1000 * 24 * 30); // 设置结束时间，这里以起始时间后30天为例
      
      // 如果是开始时间选择器
      if (this.$refs.datePicker.$el.querySelectorAll('.el-picker-panel__icon-btn')[0].classList.contains('active')) {
        return time.getTime() > end.getTime() || time.getTime() < start.getTime() - 3600 * 1000 * 24 * 7; // 起始时间不能早于当前时间前7天，不能晚于起始时间后30天
      } else { // 如果是结束时间选择器
        return time.getTime() < this.$refs.datePicker.value[0].getTime() || time.getTime() > end.getTime(); // 结束时间不能早于开始时间，不能晚于结束时间
      }
    }
  }
};

},
mounted() {

// 确保 ref 可以正确引用到 el-date-picker 组件
this.$nextTick(() => {
  this.$refs.datePicker.$el.querySelectorAll('.el-picker-panel__icon-btn').forEach(el => {
    el.addEventListener('click', () => {
      console.log('选择了', el.classList.contains('active') ? '开始时间' : '结束时间');
    });
  });
});

}
};
</script>


在上面的代码中，我们通过 `disabledDate` 函数来限制日期的选择范围。当选择开始日期时，只允许选择当前日期前7天到当前日期后30天内的日期；当选择结束日期时，只允许选择开始日期到当前日期后30天内的日期。

注意：
- `this.$refs.datePicker` 用于获取 `el-date-picker` 组件的引用，以判断当前是选择开始日期还是结束日期。但是，直接通过 `$refs` 获取并判断 `active` 类的方式并不完全可靠，因为 Element UI 内部实现可能会有所变化。更好的做法是使用 Element UI 提供的 `change` 事件或其他机制来判断当前选择的是开始日期还是结束日期。
- 示例中的 `shortcuts` 属性被清空，因为默认的快捷选项可能与自定义的限制条件冲突。

你需要根据实际需求调整时间范围和逻辑判断。

请注意，由于直接操作 DOM 类名来判断选择器状态并不是官方推荐的方法，可能会在未来的 Element UI 版本中失效。建议查看 Element UI 的官方文档，了解是否有更稳定的 API 可以使用。

1 个回答

得票最新

一行袋码

3

发布于
11 月 23 日陕西

新手上路，请多包涵

startTime 和 endTime 分别用于双向绑定 el-date-picker 的起始时间和结束时间选择值。
minStartDate、maxStartDate、minEndDate 和 maxEndDate 定义了起始时间和结束时间各自的可选范围边界。
startPickerOptions 计算属性用于设置起始时间选择器的禁用日期规则，使其只能在指定的 minStartDate 和 maxStartDate 范围内选择。
endPickerOptions 计算属性用于设置结束时间选择器的禁用日期规则。当已经选择了起始时间时，结束时间要大于等于起始时间且小于等于 maxEndDate；当还未选择起始时间时，结束时间要在 minEndDate 和 maxEndDate 范围内。

查看全部 1 个回答

推荐问题

element-ui的时间跨度控件el-date-picker如何分别限制起止时间选择范围？

如何在Element-UI的el-image-viewer组件预览图片上添加文字？

elementui校验不起作用，哪里出错了？

在vue中如何把el-dialog中表单里的内容置灰设置只读不可修改？

el-table表格行中嵌入el-dropdown导致卡顿，如何优化？

el-pagination切换分页大小问题?

elementui中，el-popover通过该组件内部方法doShow显示后，点击页面其他部分无法隐藏？

elementui的表格拖拽改变列宽后，后续列拖拽排序失效？