fix(datepicker): fix the inconsistent weekday labels (#1173)

Updating the WeekStart enum to be aligned with the values Javascript Date object uses allows to
simplify the code and maintain compaitbility. Fixed the off-by-one error

BREAKING CHANGE: As the WeekStart enum changed order to be aligned with Javascript Date object, now
you have to change your weekStart attribute to be -1, so for Monday you should put 1, instead of 2.
But it wasn't working before as the values were incorrectly rendered in the first place.

fix #1044

Author: markhker

content/docs/components/datepicker.mdx

@@ -39,13 +39,13 @@ The `weekStart` prop can be used to set the first day of the week inside the dat
 
 ```json
 {
-  "0": "Saturday",
-  "1": "Sunday",
-  "2": "Monday",
-  "3": "Tuesday",
-  "4": "Wednesday",
-  "5": "Thursday",
-  "6": "Friday"
+  "0": "Sunday",
+  "1": "Monday",
+  "2": "Tuesday",
+  "3": "Wednesday",
+  "4": "Thursday",
+  "5": "Friday",
+  "6": "Saturday"
 }
 ```
 

examples/datepicker/datepicker.weekStart.tsx

@@ -9,7 +9,7 @@ import { Datepicker } from 'flowbite-react';
 function Component() {
   return (
     <Datepicker
-      weekStart={2} // Monday
+      weekStart={1} // Monday
     />
   );
 }
@@ -21,7 +21,7 @@ import { Datepicker } from 'flowbite-react';
 function Component() {
   return (
     <Datepicker
-      weekStart={2} // Monday
+      weekStart={1} // Monday
     />
   );
 }
@@ -30,7 +30,7 @@ function Component() {
 function Component() {
   return (
     <Datepicker
-      weekStart={2} // Monday
+      weekStart={1} // Monday
     />
   );
 }

src/components/Datepicker/Views/Days.tsx

@@ -52,7 +52,7 @@ export const DatepickerViewsDays: FC<DatepickerViewsDaysProps> = ({ theme: custo
       </div>
       <div className={theme.items.base}>
         {[...Array(42)].map((_date, index) => {
-          const currentDate = addDays(startDate, index - 1);
+          const currentDate = addDays(startDate, index);
           const day = getFormattedDate(language, currentDate, { day: 'numeric' });
 
           const isSelected = isDateEqual(selectedDate, currentDate);

src/components/Datepicker/helpers.ts

@@ -6,13 +6,13 @@ export enum Views {
 }
 
 export enum WeekStart {
-  Saturday,
   Sunday,
   Monday,
   Tuesday,
   Wednesday,
   Thursday,
   Friday,
+  Saturday,
 }
 
 export const isDateInRange = (date: Date, minDate?: Date, maxDate?: Date): boolean => {
@@ -59,20 +59,23 @@ export const getFirstDayOfTheMonth = (date: Date, weekStart: WeekStart): Date =>
   const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
   const dayOfWeek = firstDayOfMonth.getDay();
 
-  const diff = (dayOfWeek - weekStart + 7) % 7;
+  let diff = dayOfWeek - weekStart;
+  if (diff < 0) {
+    diff += 7;
+  }
+
   return addDays(firstDayOfMonth, -diff);
 };
 
 export const getWeekDays = (lang: string, weekStart: WeekStart): string[] => {
   const weekdays: string[] = [];
   const date = new Date(0);
+  date.setDate(date.getDate() - date.getDay() + weekStart);
 
   const formatter = new Intl.DateTimeFormat(lang, { weekday: 'short' });
 
   for (let i = 0; i < 7; i++) {
-    const dayIndex = (i + weekStart + 1) % 7;
-    const formattedWeekday = formatter.format(addDays(date, dayIndex + 1));
-    weekdays.push(formattedWeekday.slice(0, 2).charAt(0).toUpperCase() + formattedWeekday.slice(1, 3));
+    weekdays.push(formatter.format(addDays(date, i)));
   }
 
   return weekdays;