Element UI中日期选择器级联——让选择更得心应手

2023-10-09 08:03:58

创建一个级联日期选择器

要创建一个级联日期选择器，我们需要使用Element UI的DatePicker组件。这个组件提供了丰富的属性和方法，可以满足各种场景的需求。

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

<script>
import { DatePicker } from 'element-ui';

export default {
  components: {
    DatePicker,
  },
  data() {
    return {
      value: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 86400000;
        },
      },
    };
  },
};
</script>

这段代码创建一个了一个级联日期选择器。当用户选择了一个开始日期后，结束日期的可选范围会被限制为从开始日期开始的所有日期。

2. 自定义级联日期选择器

Element UI的日期选择器提供了丰富的自定义选项，我们可以根据自己的需求进行定制。

例如，我们可以自定义禁用日期的规则。在上面的代码中，我们使用了一个简单的规则来禁用过去的所有日期。但我们可以根据实际情况来定义更复杂的规则。

pickerOptions: {
  disabledDate(time) {
    // 自定义禁用日期的规则
    if (time.getDay() === 0) {
      // 禁用周日
      return true;
    }
    if (time.getDay() === 6) {
      // 禁用周六
      return true;
    }
    return false;
  },
},

我们还可以自定义日期选择器的外观。例如，我们可以修改日期选择器的颜色、字体和大小。

.el-date-picker {
  color: #333;
  font-size: 14px;
}

.el-date-picker__header {
  background-color: #f5f5f5;
}

.el-date-picker__cell {
  width: 30px;
  height: 30px;
}