fix(components): [date-picker-panel] weekstart incorrect select offset (#23226)

* fix(components): [date-picker-panel] weekstart incorrect select offset

closed #23221

* chore: apply rabbit comment

packages/components/date-picker-panel/__tests__/date-picker-panel.test.tsx

@@ -1,6 +1,7 @@
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import dayjs from 'dayjs'
+import updateLocale from 'dayjs/plugin/updateLocale'
 import triggerEvent from '@element-plus/test-utils/trigger-event'
 import { describe, expect, it, vi } from 'vitest'
 import DatePickerPanel from '../src/date-picker-panel'
@@ -17,6 +18,14 @@ const makeRange = (start: number, end: number) => {
   return result
 }
 
+const setDayjsWeekStart = (weekStart = 0) => {
+  dayjs.extend(updateLocale)
+  const dayjsLocale = dayjs.locale()
+  dayjs.updateLocale(dayjsLocale, {
+    weekStart,
+  })
+}
+
 describe('DatePickerPanel', () => {
   it('should have border', async () => {
     const wrapper = mount(() => <DatePickerPanel />)
@@ -103,6 +112,26 @@ describe('DatePickerPanel', () => {
     )
   })
 
+  describe('should correctly select a date when weekStart change', () => {
+    const weekStarts = Array.from({ length: 7 }, (_, idx) => idx)
+
+    it.each(weekStarts)('dayjs "weekStart: %s" works', async (weekStart) => {
+      setDayjsWeekStart(weekStart)
+      const modelValue = ref<string>()
+      const wrapper = mount(() => (
+        <DatePickerPanel
+          v-model={modelValue.value}
+          defaultValue={new Date(2001, 0)}
+        />
+      ))
+      const cell = wrapper.find('.available')
+      await cell.trigger('mousemove')
+      await cell.trigger('click')
+
+      expect(wrapper.find('.available.current').text()).toBe(cell.text())
+    })
+  })
+
   describe(':type="datetime" & :type="datetimerange"', () => {
     describe(':type="datetime"', () => {
       it('dateFormat & timeFormat', async () => {

packages/components/date-picker-panel/src/composables/use-basic-date-table.ts

@@ -40,8 +40,10 @@ export const useBasicDateTable = (
     .map((_) => _.toLowerCase())
 
   const offsetDay = computed(() => {
-    // Sunday 7(0), cal the left and right offset days, 3217654, such as Monday is -1, the is to adjust the position of the first two rows of dates
-    return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek
+    // Sunday 7(0), calculate the offset days to adjust the position of the first two rows of dates
+    // For weekStart <= 3: offset = weekStart (e.g., Monday = 1, Tuesday = 2, Wednesday = 3)
+    // For weekStart > 3: offset = 7 - weekStart (e.g., Thursday = 3, Friday = 2, Saturday = 1)
+    return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : firstDayOfWeek
   })
 
   const startDate = computed(() => {