el-date-picker：巧用日期范围限制，提升用户体验

2024-02-14 02:34:16

限制所选日期范围

el-date-picker 提供了多种属性来限制所选日期范围。我们可以使用这些属性来禁止用户选择今天或之后的日期，还可以限制用户选择日期的跨度。

禁止选择今天或之后的日期

要禁止用户选择今天或之后的日期，可以使用 disabledDate 属性。该属性接受一个函数作为参数，该函数返回一个布尔值，用于判断一个日期是否禁用。我们可以使用以下代码来实现：

<el-date-picker v-model="value" :disabled-date="disabledDate"></el-date-picker>

<script>
export default {
  data() {
    return {
      value: null
    }
  },
  methods: {
    disabledDate(date) {
      return date < new Date();
    }
  }
}
</script>

这样，用户就无法选择今天或之后的日期。

限制用户选择日期的跨度

要限制用户选择日期的跨度，可以使用 range-separator 和 start-placeholder 属性。range-separator 属性用于指定日期范围的分隔符，start-placeholder 属性用于指定开始日期的占位符。我们可以使用以下代码来实现：

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

<script>
export default {
  data() {
    return {
      value: null
    }
  }
}
</script>