fix: locale #56

src/constant/types.ts

@@ -19,24 +19,25 @@ export type InitialComponents = {
   };
   titleOfWeek?: {
     titles?: string[];
-    wrapper?: ElementType<{ jalali: boolean; startOfWeek: number; }>;
+    wrapper?: ElementType<{ jalali: boolean; startOfWeek: number }>;
   };
 };
 
 export interface InitialProps {
   autoResponsive?: boolean;
-  theme?: DeepPartial<DefaultTheme>;
+  dayClasses?: (day: Dayjs) => string[];
+  disabled?: boolean;
   disabledBeforeToday?: boolean;
   disabledBeforeDate?: string;
   disabledAfterDate?: string;
   disabledDays?: string[];
+  initialMonthAndYear?: string;
   jalali?: boolean;
-  disabled?: boolean;
-  startOfWeek?: number;
+  locale?: string;
   numberOfMonths?: number;
-  initialMonthAndYear?: string;
   onRangeDateInScreen?: DatePickerWindowUpdated;
-  dayClasses?: (day: Dayjs) => string[];
+  startOfWeek?: number;
+  theme?: DeepPartial<DefaultTheme>;
 }
 
 type DatePickerWindow = { start: string; end: string };

src/datePicker/DatePicker.tsx

@@ -11,30 +11,31 @@ import { DatePickerProps } from "./datePicker.type";
 import { Months } from "./Months";
 
 export const DatePicker = ({
-  jalali = false,
-  disabled = false,
   autoResponsive = true,
-  startOfWeek = 1,
-  numberOfMonths: numberOfMonthsProps = 1,
-  disabledDays = [],
   components,
-  theme: themeProps,
-  numberOfSelectableDays = 0,
+  dayClasses,
+  disabled = false,
   disabledBeforeToday = false,
-  disabledBeforeDate,
   disabledAfterDate,
-  selectedDays: selectedDaysProps,
-  onChange,
+  disabledBeforeDate,
+  disabledDays = [],
   initialMonthAndYear,
+  jalali = false,
+  locale,
+  numberOfMonths: numberOfMonthsProps = 1,
+  numberOfSelectableDays = 0,
+  onChange,
   onRangeDateInScreen,
-  dayClasses,
+  selectedDays: selectedDaysProps,
+  startOfWeek = 1,
+  theme: themeProps,
 }: DatePickerProps) => {
   const [selectedDays, setSelectedDays] = useState(selectedDaysProps || []);
   const [numberOfMonths, setNumberOfMonths] = useState(numberOfMonthsProps);
   const [displayMonths, setDisplayMonths] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
   const [source, setSource] = useState(
-    dayjsLocalized(jalali, initialMonthAndYear),
+    dayjsLocalized(jalali, initialMonthAndYear, locale),
   );
 
   useEffect(() => {

src/libs/dayjs-config.ts

@@ -1,9 +1,9 @@
 import _dayjs from "dayjs";
 import isBetween from "dayjs/plugin/isBetween";
 import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
-import jalaliday from "jalaliday";
+import jalaliPlugin from "@zoomit/dayjs-jalali-plugin";
 
-_dayjs.extend(jalaliday);
+_dayjs.extend(jalaliPlugin);
 _dayjs.extend(isBetween);
 _dayjs.extend(isSameOrBefore);
 

src/libs/dayjsLocalized.ts

@@ -5,9 +5,16 @@ import { dayjs } from "./dayjs-config";
 export const dayjsLocalized = (
   jalali: boolean = false,
   date?: string,
+  locale = "en",
 ): Dayjs => {
+  try {
+    require(`dayjs/locale/${locale}`);
+  } catch (error) {
+    new Error(`This ${locale} Doesn't exist`);
+  }
+
   let source = dayjs(date)
     .calendar(jalali ? "jalali" : "gregory")
-    .locale(jalali ? "fa" : "en");
+    .locale(jalali ? "fa" : locale ? locale : "en");
   return source;
 };

src/rangePicker/RangePicker.tsx

@@ -11,30 +11,31 @@ import { Months } from "./Months";
 import { RangePickerProps } from "./rangePicker.type";
 
 export const RangePicker = ({
-  jalali = false,
-  startOfWeek = 1,
-  numberOfMonths: numberOfMonthsProps = 1,
-  disabledDays = [],
-  disabledBeforeToday = false,
-  disabledBeforeDate,
-  disabledAfterDate,
-  disabled = false,
+  autoResponsive = true,
   allowDisabledDaysSpan = false,
   components,
-  theme: themeProps,
-  autoResponsive = true,
-  selectedDays: selectedDaysProps,
-  onChange,
+  disabled = false,
+  dayClasses,
+  disabledAfterDate,
+  disabledBeforeToday = false,
+  disabledBeforeDate,
+  disabledDays = [],
   initialMonthAndYear,
+  jalali = false,
+  locale,
+  numberOfMonths: numberOfMonthsProps = 1,
+  onChange,
   onRangeDateInScreen,
-  dayClasses,
+  selectedDays: selectedDaysProps,
+  startOfWeek = 1,
+  theme: themeProps,
 }: RangePickerProps) => {
   const [selectedDays, setSelectedDays] = useState(selectedDaysProps);
   const [hoverDay, setHoverDay] = useState<string>();
   const [displayMonths, setDisplayMonths] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
   const [source, setSource] = useState(
-    dayjsLocalized(jalali, initialMonthAndYear),
+    dayjsLocalized(jalali, initialMonthAndYear, locale),
   );
   const [numberOfMonths, setNumberOfMonths] = useState(numberOfMonthsProps);
 

src/stories/docs/DatePicker.stories.mdx

@@ -37,6 +37,7 @@ import { dayjs } from "libs/dayjs-config";
 - [disabledDays](#disabled-days)
 - [initialMonthAndYear](#initial-month-and-year)
 - [jalali](#jalali)
+- [locale](#locale)
 - [numberOfMonths](#number-of-months)
 - [numberOfSelectableDays](#number-of-selectable-days)
 - [onChange](#onchange)
@@ -233,6 +234,16 @@ Change Calendar to Jalali
 <DatePicker jalali />
 ```
 
+### Locale
+
+Change locale of the calendar
+
+<DatePicker locale="de" onChange={dates => console.log("dates", dates)} />
+
+```jsx
+<DatePicker locale="de" />
+```
+
 ### Number Of Months
 
 Define how many months displays in the page, if autoResponsive is enabled this won't work.

src/stories/docs/RangePicker.stories.mdx

@@ -38,6 +38,7 @@ import { dayjs } from "libs/dayjs-config";
 - [disabledDays](#disabled-days)
 - [initialMonthAndYear](#initial-month-and-year)
 - [jalali](#jalali)
+- [locale](#locale)
 - [numberOfMonths](#number-of-months)
 - [numberOfSelectableDays](#number-of-selectable-days)
 - [onChange](#onchange)
@@ -240,6 +241,16 @@ Change Calendar to Jalali
 <RangePicker jalali />
 ```
 
+### Locale
+
+Change locale of the calendar
+
+<RangePicker locale="de" onChange={dates => console.log("dates", dates)} />
+
+```jsx
+<RangePicker locale="de" />
+```
+
 ### Number Of Months
 
 Define how many months displays in the page, if autoResponsive is enabled this won't work.