javascript - elemenUI日期选择器，选择开始日期之后，结束日期只能选择，12月以内的。怎么判断？

Question

elementUI 日期选择器，选择开始日期之后，结束日期只能选择，12月以内的。怎么判断？

Answer 1

通过设置 el-date-picker 组件 pickerOptions 属性中的 disabledDate 属性。判断一下是否超过12月31日就可以了。超过了就就返回 false，没有超过就返回 true。

比如说下面这样的示例代码：

<template>  <el-date-picker    v-model="value"    type="daterange"    range-separator="至"    start-placeholder="开始日期"    end-placeholder="结束日期"    :picker-options="pickerOptions"  >  </el-date-picker></template><script>export default {  data() {    return {      pickerOptions: {        disabledDate(time) {          return time.getTime() >= new Date('2023-12-31'); // 可以使用 dayjs 之类的时间处理库        }      },      value: '',    };}</script>

Answer 2

您可以通过监听 date-picker 的 change 事件来实现这个功能。当用户选择开始日期后，您可以设置一个最大日期，使得选择结束日期时不能超过开始日期加上12个月。

下面是一个基本的实现方法：

1. 首先，您需要确保您已经安装了 Element UI。如果您还没有安装，可以使用下面的命令来安装：

npm i element-ui -S

2. 在您的 Vue 组件中引入 Element UI 的日期选择器组件：

import { DatePicker } from 'element-ui';export default {  components: {    DatePicker,  },  data() {    return {      // your other data...      startDate: null, // 开始日期      endDate: null, // 结束日期    };  },  methods: {    onStartDateChange(newDate) {      this.startDate = newDate;      if (this.endDate && this.endDate.valueOf() < this.startDate.valueOf()) {        this.endDate = null; // 如果结束日期在开始日期之前，则清除结束日期      }      this.$refs.endDatePicker.$emit('picker-change', this.startDate); // 更新结束日期的最大可选日期    },    onEndDateChange(newDate) {      this.endDate = newDate;      if (this.endDate && this.endDate.valueOf() < this.startDate.valueOf()) {        this.endDate = null; // 如果结束日期在开始日期之前，则清除结束日期      }    },  },};

3. 在模板中，使用 v-model 来绑定开始日期和结束日期，并监听 date-picker 的 change 事件：

<template>  <div>    <el-date-picker      v-model="startDate"      type="date"      placeholder="选择开始日期"      @change="onStartDateChange"    ></el-date-picker>    <el-date-picker      v-model="endDate"      type="date"      placeholder="选择结束日期"      @change="onEndDateChange"      ref="endDatePicker" // 在这里引用日期选择器，以便在其他地方访问它。你可以使用 $refs 来访问它。    ></el-date-picker>  </div></template>