Element-ui组件之El-Date-Picker时间选择器-限制时间段&回显

2023-11-20 19:46:49

如何在 Element UI 的 El-Date-Picker 中限制时间段和实现回显

在实际开发中，时间选择器是一个必不可少的组件，它可以让用户快速选择日期和时间。Element UI 提供了强大的 El-Date-Picker 时间选择器组件，它可以帮助开发者轻松实现各种时间选择需求。本文将详细介绍如何在 El-Date-Picker 中限制可选择的时间段和实现回显功能，并提供详细的示例代码，让读者可以轻松掌握时间选择器的使用技巧。

限制时间段

有时候，我们需要限制用户只能选择某个时间段内的日期和时间。例如，在一个预订系统中，我们可能需要限制用户只能选择未来一周内的日期。要实现这一功能，我们可以使用 El-Date-Picker 的 disabledDate 属性。disabledDate 接收一个函数作为参数，该函数返回一个布尔值，表示该日期是否禁用。

<el-date-picker
  v-model="value"
  type="daterange"
  :start-placeholder="startPlaceholder"
  :end-placeholder="endPlaceholder"
  :picker-options="pickerOptions"
/>

import { ElDatePicker } from 'element-ui';

export default {
  components: {
    ElDatePicker,
  },
  data() {
    return {
      value: [],
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 86400000;
        },
      },
    };
  },
};

回显

回显是指在时间选择器中显示之前选择的时间段。例如，在一个表单中，我们可能需要回显用户上次填写的日期和时间。要实现这一功能，我们可以使用 El-Date-Picker 的 v-model 属性。v-model 接收一个数组作为参数，该数组包含两个值：开始日期和结束日期。

<el-date-picker
  v-model="value"
  type="daterange"
  :start-placeholder="startPlaceholder"
  :end-placeholder="endPlaceholder"
  :picker-options="pickerOptions"
/>

import { ElDatePicker } from 'element-ui';

export default {
  components: {
    ElDatePicker,
  },
  data() {
    return {
      value: ['2023-08-01', '2023-08-10'],
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      pickerOptions: {},
    };
  },
};