fix(date-picker): refactor date utility functions and week picker to …

…correctly show selected week (#2970) * fix(date-picker): refactor date utility functions and week picker to correctly show selected week * docs(date-picker): update WeekPicker usage with `dayStartOfWeek` in demo * test(date-picker): update WeekPicker snapshot
arco-design · Feb 21, 2024 · 22755e1 · 22755e1
1 parent 749804c
commit 22755e1
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 21 deletions.
diff --git a/packages/web-vue/components/_utils/date.ts b/packages/web-vue/components/_utils/date.ts
@@ -51,21 +51,34 @@ export const methods = {
   startOf(time: Dayjs, unit: OpUnitType) {
     return time.startOf(unit);
   },
+  /**
+   * Similar to `startOf`, returns start date of a week; used in week pickers
+   * @param time Selected date
+   * @param weekStart Start day of a week
+   * @returns Start date of the week containing the selected date
+   */
+  startOfWeek(time: Dayjs, weekStart: number) {
+    const currentDay = time.day();
+    let startOfWeek = time.subtract(currentDay - weekStart, 'day');
+    if (startOfWeek.isAfter(time)) {
+      startOfWeek = startOfWeek.subtract(7, 'day');
+    }
+    return startOfWeek;
+  },
   endOf(time: Dayjs, unit: OpUnitType) {
     return time.endOf(unit);
   },
   set(time: Dayjs, unit: UnitType, value: number) {
     return time.set(unit, value);
   },
-  isSameWeek(
-    date1: Dayjs,
-    date2: Dayjs,
-    weekStart: number,
-    localeName: string
-  ) {
-    return date1
-      .locale({ ...dayjs.Ls[localeName.toLocaleLowerCase()], weekStart })
-      .isSame(date2, 'week');
+  isSameWeek(date1: Dayjs, date2: Dayjs, weekStart: number) {
+    // calculate week number of the given date considering the given start of week
+    const getWeek = (date: Dayjs) => {
+      const day = date.day();
+      const diff = day - weekStart + (day < weekStart ? 7 : 0);
+      return date.subtract(diff, 'day').week();
+    };
+    return getWeek(date1) === getWeek(date2);
   },
 };
 

diff --git a/packages/web-vue/components/date-picker/__demo__/week.md b/packages/web-vue/components/date-picker/__demo__/week.md
@@ -6,18 +6,22 @@ title:
 
 ## zh-CN
 
-周输入器的基础使用。
+周选择器提供了一种选择星期的简单方法。也可以指定一周的起始日。
 
 ---
 
 ## en-US
 
-The basic usage of WeekPicker.
+WeekPicker provides a simple way to select weeks. It also allows you to specify the starting day of the week.
 
 ---
 
 ```vue
 <template>
-  <a-week-picker style="width: 200px;" />
+  <a-week-picker style="width: 200px; margin: 0 24px 24px 0;" />
+  <a-week-picker
+    style="width: 200px; margin: 0 24px 24px 0;"
+    day-start-of-week="1"
+  />
 </template>
 ```
diff --git a/packages/web-vue/components/date-picker/__test__/__snapshots__/demo.test.ts.snap b/packages/web-vue/components/date-picker/__test__/__snapshots__/demo.test.ts.snap
@@ -1316,7 +1316,16 @@ exports[`<date-picker> demo: render [trigger-element] correctly 1`] = `
 `;
 
 exports[`<date-picker> demo: render [week] correctly 1`] = `
-"<div class=\\"arco-picker arco-picker-size-medium\\" style=\\"width: 200px;\\" visible=\\"false\\">
+"<div class=\\"arco-picker arco-picker-size-medium\\" style=\\"width: 200px; margin: 0px 24px 24px 0px;\\" visible=\\"false\\">
+  <!--v-if-->
+  <div class=\\"arco-picker-input\\"><input placeholder=\\"请选择周\\" class=\\"arco-picker-start-time\\"></div>
+  <div class=\\"arco-picker-suffix\\">
+    <!--v-if--><span class=\\"arco-picker-suffix-icon\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-calendar\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\"></path></svg></span>
+    <!--v-if-->
+  </div>
+</div>
+<!---->
+<div class=\\"arco-picker arco-picker-size-medium\\" style=\\"width: 200px; margin: 0px 24px 24px 0px;\\" visible=\\"false\\">
   <!--v-if-->
   <div class=\\"arco-picker-input\\"><input placeholder=\\"请选择周\\" class=\\"arco-picker-start-time\\"></div>
   <div class=\\"arco-picker-suffix\\">

diff --git a/packages/web-vue/components/date-picker/panels/week/index.vue b/packages/web-vue/components/date-picker/panels/week/index.vue
@@ -33,21 +33,22 @@ export default defineComponent({
   setup(props, { emit }) {
     const { locale } = useI18n();
     const isSameTime: IsSameTime = (current, target) => {
-      return methods.isSameWeek(
-        current,
-        target,
-        props.dayStartOfWeek,
-        locale.value
-      );
+      return methods.isSameWeek(current, target, props.dayStartOfWeek);
     };
     return {
       isSameTime,
       onSelect: (value: Dayjs) => {
-        const startDateOfWeek = methods.startOf(value, 'week');
+        const startDateOfWeek = methods.startOfWeek(
+          value,
+          props.dayStartOfWeek
+        );
         emit('select', startDateOfWeek);
       },
       onCellMouseEnter: (value: Dayjs) => {
-        const startDateOfWeek = methods.startOf(value, 'week');
+        const startDateOfWeek = methods.startOfWeek(
+          value,
+          props.dayStartOfWeek
+        );
         emit('cell-mouse-enter', startDateOfWeek);
       },
     };