Vue3 ele-plus 关于日期选择范围不可跨月

在Vue3中使用element-plus的日期选择器组件时，如果需要限制日期选择范围不能跨月份，可以通过监听日期选择器的变化来实现。

以下是一个简单的示例代码：

<template>
  <el-date-picker
    v-model="range"
    type="daterange"
    @change="checkDateRange"
    unlink-panels
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  ></el-date-picker>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
 
const range = ref([]);
 
const checkDateRange = (value) => {
  if (value && value.length === 2) {
    const [start, end] = value;
    if (start && end) {
      const startMonth = start.getMonth();
      const endMonth = end.getMonth();
      if (startMonth !== endMonth) {
        ElMessage.error('日期范围不能跨月');
        range.value = []; // 重置日期范围
      }
    }
  }
};
</script>

在这个示例中，我们使用了el-date-picker组件的daterange类型来选择日期范围。我们监听了它的change事件，当用户选择了日期范围时，checkDateRange函数会被调用。在这个函数中，我们检查了选中的开始和结束日期是否在同一个月份。如果不在同一个月份，我们通过ElMessage.error显示错误信息，并通过重置range.value来取消用户的选择。