Implement localization functionality with <LocalizationProvider /> powered by date-io

Author: whitphx

src/LocalizationProvider/LocalizationProvider.tsx

@@ -0,0 +1,62 @@
+// Ref: https://github.com/mui/mui-x/blob/5dc5bd4b04eecf21c45cf6ea1169727ba5ab3be3/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx
+
+import * as React from "react";
+import { DateIOFormats } from "@date-io/core/IUtils";
+import { IUtils } from "@date-io/core/IUtils";
+
+type DateAdapter<TDate> = IUtils<TDate>;
+
+export interface DateAdapterContextValue<TDate> {
+  utils: DateAdapter<TDate>;
+}
+
+export const DateAdapterContext =
+  React.createContext<DateAdapterContextValue<unknown> | null>(null);
+if (process.env.NODE_ENV !== "production") {
+  DateAdapterContext.displayName = "DateAdapterContext";
+}
+
+export interface LocalizationProviderProps {
+  children?: React.ReactNode;
+  /** DateIO adapter class function */
+  dateAdapter: new (...args: any) => DateAdapter<unknown>;
+  /** Formats that are used for the child dropdown */
+  dateFormats?: Partial<DateIOFormats>;
+  /**
+   * Date library instance you are using, if it has some global overrides
+   * ```jsx
+   * dateLibInstance={momentTimeZone}
+   * ```
+   */
+  dateLibInstance?: any;
+  /** Locale for the date library you are using */
+  locale?: string | object;
+}
+
+/**
+ * @ignore - do not document.
+ */
+export function LocalizationProvider(props: LocalizationProviderProps) {
+  const {
+    children,
+    dateAdapter: Utils,
+    dateFormats,
+    dateLibInstance,
+    locale,
+  } = props;
+  const utils = React.useMemo(
+    () =>
+      new Utils({ locale, formats: dateFormats, instance: dateLibInstance }),
+    [Utils, locale, dateFormats, dateLibInstance]
+  );
+
+  const contextValue: DateAdapterContextValue<unknown> = React.useMemo(() => {
+    return { utils };
+  }, [utils]);
+
+  return (
+    <DateAdapterContext.Provider value={contextValue}>
+      {children}
+    </DateAdapterContext.Provider>
+  );
+}

src/LocalizationProvider/index.ts

@@ -0,0 +1 @@
+export * from "./LocalizationProvider";

src/LocalizationProvider/useUtils.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { DateAdapterContext } from "./LocalizationProvider";
+
+export const useUtils = () => {
+  const localization = React.useContext(DateAdapterContext);
+
+  if (localization == null) {
+    return null;
+  }
+
+  return localization.utils;
+};

src/adapters/date-fns-jalali.ts

@@ -0,0 +1 @@
+export { default } from "@date-io/date-fns-jalali";

src/adapters/date-fns.ts

@@ -0,0 +1 @@
+export { default } from "@date-io/date-fns";

src/adapters/dayjs.ts

@@ -0,0 +1 @@
+export { default } from "@date-io/dayjs";

src/adapters/jalaali.ts

@@ -0,0 +1 @@
+export { default } from "@date-io/jalaali";

src/adapters/luxon.ts

@@ -0,0 +1 @@
+export { default } from "@date-io/luxon";

src/index.ts

@@ -7,3 +7,4 @@ export {
 export * from "./use-date-select";
 export { getDateString } from "./date-string";
 export * from "./types";
+export * from "./LocalizationProvider";

src/use-date-select.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { range } from "./range";
 import { compileDateString, parseDateString } from "./date-string";
 import { Option, Options } from "./types";
+import { useUtils } from "./LocalizationProvider/useUtils";
 
 const DEFAULT_MIN_YEAR = 1960;
 const DEFAULT_MAX_YEAR = new Date().getFullYear();
@@ -17,9 +18,6 @@ function compileOption(value: string): Option {
   return { value, label: value }; // TODO: Be customizable for localization
 }
 
-const monthOptions: Options = range(1, 12).map((i) =>
-  compileOption(convertToSelectValue(i))
-);
 const dayOptions: Options = range(1, 31).map((i) =>
   compileOption(convertToSelectValue(i))
 );
@@ -169,6 +167,8 @@ export const useDateSelect = (
     }
   }, [setDate, value]);
 
+  const utils = useUtils();
+
   const yearOptions = useMemo(() => {
     const minYear = opts.minYear != null ? opts.minYear : DEFAULT_MIN_YEAR;
     const maxYear = opts.maxYear != null ? opts.maxYear : DEFAULT_MAX_YEAR;
@@ -182,6 +182,15 @@ export const useDateSelect = (
     return raw;
   }, [opts.minYear, opts.maxYear, state.yearValue]);
 
+  const monthOptions: Options = useMemo(() => {
+    return range(1, 12).map((i) => {
+      const label = utils
+        ? utils.format(new Date(1960, i - 1, 1), "monthShort")
+        : convertToSelectValue(i);
+      return { value: convertToSelectValue(i), label };
+    });
+  }, [utils]);
+
   return {
     yearValue: state.yearValue,
     monthValue: state.monthValue,

website/Main.mdx

@@ -82,6 +82,12 @@ import HideDaySampleCode from "./samples/options/hide-day?raw";
 
 `hideDay` prop to hide the day select.
 
+### Localization
+
+import LocalizationSampleCode from "./samples/options/localization?raw";
+
+<CodePreview initialCode={LocalizationSampleCode} language="tsx" />
+
 ### A custom component wrapping the preset component
 
 import ReusedPresetComponentSampleCode from "./samples/options/reused-preset-component?raw";

website/components/CodePreview/scope.ts

@@ -5,6 +5,12 @@ import * as reactYmdDateSelect from "react-ymd-date-select";
 import * as vanillaPreset from "react-ymd-date-select/presets/vanilla";
 import * as chakraPreset from "react-ymd-date-select/presets/chakra-ui";
 import * as muiPreset from "react-ymd-date-select/presets/mui";
+import { default as DateFnsAdapter } from "react-ymd-date-select/adapters/date-fns";
+import dateFnsFrLocale from "date-fns/locale/fr";
+import dateFnsRuLocale from "date-fns/locale/ru";
+import dateFnsDeLocale from "date-fns/locale/de";
+import dateFnsEnLocale from "date-fns/locale/en-US";
+import dateFnsJaLocale from "date-fns/locale/ja";
 
 export const scope = {
   import: {
@@ -15,5 +21,11 @@ export const scope = {
     "react-ymd-date-select/presets/vanilla": vanillaPreset,
     "react-ymd-date-select/presets/chakra-ui": chakraPreset,
     "react-ymd-date-select/presets/material": muiPreset,
+    "react-ymd-date-select/adapters/date-fns": DateFnsAdapter,
+    "date-fns/locale/fr": dateFnsFrLocale,
+    "date-fns/locale/ru": dateFnsRuLocale,
+    "date-fns/locale/de": dateFnsDeLocale,
+    "date-fns/locale/en-US": dateFnsEnLocale,
+    "date-fns/locale/ja": dateFnsJaLocale,
   },
 };

website/components/EyeCatchDateSelect/index.tsx

@@ -1,7 +1,12 @@
 import { useState } from "react";
 import { FormControl, FormErrorMessage, Select } from "@chakra-ui/react";
 import styled from "@emotion/styled";
-import { useDateSelect, getDateString } from "react-ymd-date-select";
+import DateFnsAdapter from "@date-io/date-fns";
+import {
+  useDateSelect,
+  getDateString,
+  LocalizationProvider,
+} from "react-ymd-date-select";
 
 const dropdownIconColor = "#be5f6f";
 const errorColor = "#fcdfff";
@@ -75,4 +80,12 @@ function EyeCatchDateSelect() {
   );
 }
 
-export default EyeCatchDateSelect;
+function LocalizedEyeCatchDateSelect() {
+  return (
+    <LocalizationProvider dateAdapter={DateFnsAdapter}>
+      <EyeCatchDateSelect />
+    </LocalizationProvider>
+  );
+}
+
+export default LocalizedEyeCatchDateSelect;

website/samples/options/localization.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import frLocale from "date-fns/locale/fr";
+import ruLocale from "date-fns/locale/ru";
+import deLocale from "date-fns/locale/de";
+import enLocale from "date-fns/locale/en-US";
+import jaLocale from "date-fns/locale/ja";
+import { LocalizationProvider } from "react-ymd-date-select";
+import { DateSelect } from "react-ymd-date-select/presets/vanilla";
+/* Select the appropriate adapter for the library you are using as below. */
+import DateAdapter from "react-ymd-date-select/adapters/date-fns";
+// import DateAdapter from "react-ymd-date-select/adapters/dayjs";
+// import DateAdapter from "react-ymd-date-select/adapters/luxon";
+// import DateAdapter from "react-ymd-date-select/adapters/date-fns-jalali";
+// import DateAdapter from "react-ymd-date-select/adapters/jalaali";
+
+const localeMap = {
+  en: enLocale,
+  fr: frLocale,
+  ru: ruLocale,
+  de: deLocale,
+  ja: jaLocale,
+};
+
+type Locale = keyof typeof localeMap;
+
+function Sample() {
+  const [locale, setLocale] = useState<Locale>("en");
+  const [date, setDate] = useState<string>("");
+
+  return (
+    <div>
+      <div>
+        <label>
+          Locale:
+          <select
+            value={locale}
+            onChange={(e) => setLocale(e.target.value as Locale)}
+          >
+            {Object.keys(localeMap).map((localeItem) => (
+              <option key={localeItem} value={localeItem}>
+                {localeItem}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+
+      <LocalizationProvider
+        dateAdapter={DateAdapter}
+        locale={localeMap[locale]}
+      >
+        <DateSelect value={date} onChange={setDate} defaultMonth="now" />
+        <p>Selected date is: {date}</p>
+      </LocalizationProvider>
+    </div>
+  );
+}
+
+export default Sample;