✨ feat: 新增周范围选择器不允许选择相同时间

src/components/WeekRangePicker/index.vue

@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import enLocale from 'element-plus/es/locale/lang/en';
 import dayjs from 'dayjs';
+import { nextTick, ref } from 'vue';
+import { ElMessage } from 'element-plus';
 
+const datePicker = ref();
 const dateModel = defineModel({
   type: Array,
 });
-
-// 默认选中上周日和上周六
+const temp = dateModel.value || [];
 const today = dayjs();
 
 function disabledDate(date: Date) {
@@ -18,13 +20,29 @@ function disabledDate(date: Date) {
   // 禁用超过当前日期的日期
   return date.getTime() > today.toDate().getTime();
 }
+
+function handleCalendarChange(data: Date[]) {
+  if (data && data.length === 2) {
+    const [startDate, endDate] = data.map((date: Date) => dayjs(date).format('YYYY-MM-DD'));
+    // 不允许选择相同时间段
+    if (startDate === endDate) {
+      nextTick(() => {
+        dateModel.value = temp;
+        datePicker.value.handleOpen();
+      });
+      ElMessage.warning({ message: '请勿选择相同时间段!', plain: true });
+    }
+  }
+}
 </script>
 
 <template>
   <el-config-provider :locale="enLocale">
     <el-date-picker
+      ref="datePicker"
       v-model="dateModel"
       :disabled-date="disabledDate"
+      @calendar-change="handleCalendarChange"
       :clearable="false"
       type="daterange"
       format="YYYY-MM-DD"