feat: use locale configuration for startWeekOn

for default value

Author: handinugroho

pages/index.js

@@ -24,7 +24,7 @@ export default function Playground() {
     const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD");
     const [readOnly, setReadOnly] = useState(false);
     const [startFrom, setStartFrom] = useState("2023-03-01");
-    const [startWeekOn, setStartWeekOn] = useState("sun");
+    const [startWeekOn, setStartWeekOn] = useState(null);
 
     return (
         <div className="px-4 py-8">

src/components/Calendar/Week.tsx

@@ -1,39 +1,44 @@
 import dayjs from "dayjs";
+import weekday from "dayjs/plugin/weekday";
 import React, { useContext } from "react";
 
 import DatepickerContext from "../../contexts/DatepickerContext";
 import { loadLanguageModule, shortString, ucFirst } from "../../helpers";
 
+dayjs.extend(weekday);
+
 const Week: React.FC = () => {
     const { i18n, startWeekOn } = useContext(DatepickerContext);
     loadLanguageModule(i18n);
-    let startDateModifier = 0;
-    switch (startWeekOn) {
-        case "mon":
-            startDateModifier = 1;
-            break;
-        case "tue":
-            startDateModifier = 2;
-            break;
-        case "wed":
-            startDateModifier = 3;
-            break;
-        case "thu":
-            startDateModifier = 4;
-            break;
-        case "fri":
-            startDateModifier = 5;
-            break;
-        case "sat":
-            startDateModifier = 6;
-            break;
-        case "sun":
-            startDateModifier = 0;
-            break;
-        default:
-            startDateModifier = 0;
-            break;
+    let startDateModifier = dayjs().locale(i18n).weekday(0).get("day");
+    if (startWeekOn) {
+        switch (startWeekOn) {
+            case "mon":
+                startDateModifier = 1;
+                break;
+            case "tue":
+                startDateModifier = 2;
+                break;
+            case "wed":
+                startDateModifier = 3;
+                break;
+            case "thu":
+                startDateModifier = 4;
+                break;
+            case "fri":
+                startDateModifier = 5;
+                break;
+            case "sat":
+                startDateModifier = 6;
+                break;
+            case "sun":
+                startDateModifier = 0;
+                break;
+            default:
+                break;
+        }
     }
+
     return (
         <div className="grid grid-cols-7 border-b border-gray-300 dark:border-gray-700 py-2">
             {[0, 1, 2, 3, 4, 5, 6].map((item, index) => (

src/components/Calendar/index.tsx

@@ -64,9 +64,9 @@ const Calendar: React.FC<Props> = ({
     const previous = useCallback(() => {
         return getLastDaysInMonth(
             previousMonth(date),
-            getNumberOfDay(getFirstDayInMonth(date).ddd, startWeekOn)
+            getNumberOfDay(getFirstDayInMonth(date).ddd, i18n, startWeekOn)
         );
-    }, [date, startWeekOn]);
+    }, [date, i18n, startWeekOn]);
 
     const current = useCallback(() => {
         return getDaysInMonth(formatDate(date));

src/components/Datepicker.tsx

@@ -69,7 +69,7 @@ const Datepicker: React.FC<Props> = ({
     containerClassName = null,
     displayFormat = "YYYY-MM-DD",
     readOnly = false,
-    startWeekOn = "sun"
+    startWeekOn
 }) => {
     // Ref
     const containerRef = useRef<HTMLDivElement>(null);

src/helpers/index.ts

@@ -1,5 +1,7 @@
 import dayjs from "dayjs";
+import weekday from "dayjs/plugin/weekday";
 
+dayjs.extend(weekday);
 export function getTextColorByPrimaryColor(color: string) {
     switch (color) {
         case "blue":
@@ -123,35 +125,37 @@ export function getLastElementsInArray(array: number[] = [], size = 0) {
     return result.reverse();
 }
 
-export function getNumberOfDay(dayString: string, startWeekOn = "sun"): number {
+export function getNumberOfDay(dayString: string, i18n: string, startWeekOn?: string): number {
     let number = 0;
 
-    let startDateModifier = 0;
-    switch (startWeekOn) {
-        case "mon":
-            startDateModifier = 6;
-            break;
-        case "tue":
-            startDateModifier = 5;
-            break;
-        case "wed":
-            startDateModifier = 4;
-            break;
-        case "thu":
-            startDateModifier = 3;
-            break;
-        case "fri":
-            startDateModifier = 2;
-            break;
-        case "sat":
-            startDateModifier = 1;
-            break;
-        case "sun":
-            startDateModifier = 0;
-            break;
-        default:
-            startDateModifier = 0;
-            break;
+    let startDateModifier = 7 - dayjs().locale(i18n).weekday(0).get("day");
+
+    if (startWeekOn) {
+        switch (startWeekOn) {
+            case "mon":
+                startDateModifier = 6;
+                break;
+            case "tue":
+                startDateModifier = 5;
+                break;
+            case "wed":
+                startDateModifier = 4;
+                break;
+            case "thu":
+                startDateModifier = 3;
+                break;
+            case "fri":
+                startDateModifier = 2;
+                break;
+            case "sat":
+                startDateModifier = 1;
+                break;
+            case "sun":
+                startDateModifier = 0;
+                break;
+            default:
+                break;
+        }
     }
 
     ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].forEach(