feat(web): enable daypicker component i18n (#1515)

labring · Sep 4, 2023 · 71ec0ca · 71ec0ca
1 parent 969f50d
commit 71ec0ca
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/web/src/components/DateRangePicker/index.tsx b/web/src/components/DateRangePicker/index.tsx
@@ -1,5 +1,6 @@
 import { ChangeEventHandler, useMemo, useState } from "react";
 import { DateRange, DayPicker, SelectRangeEventHandler } from "react-day-picker";
+import { useTranslation } from "react-i18next";
 import { CalendarIcon } from "@chakra-ui/icons";
 import {
   Box,
@@ -12,6 +13,7 @@ import {
 } from "@chakra-ui/react";
 import clsx from "clsx";
 import { format, isAfter, isBefore, isValid, parse } from "date-fns";
+import { es, zhCN } from "date-fns/locale";
 
 import "./index.css";
 import "react-day-picker/dist/style.css";
@@ -28,6 +30,7 @@ export default function DateRangePicker(props: {
   const [fromValue, setFromValue] = useState<string>(format(initState.from, "y-MM-dd"));
   const [toValue, setToValue] = useState<string>(format(initState.to, "y-MM-dd"));
   const darkMode = useColorMode().colorMode === "dark";
+  const { i18n } = useTranslation();
   const onClose = () => {
     selectedRange.from && setStartTime(selectedRange.from);
     selectedRange.to && setEndTime(selectedRange.to);
@@ -103,6 +106,7 @@ export default function DateRangePicker(props: {
         <PopoverContent zIndex={99}>
           <DayPicker
             mode="range"
+            locale={i18n.language === "en" ? es : zhCN}
             selected={selectedRange}
             onSelect={handleRangeSelect}
             styles={{

diff --git a/web/src/pages/app/setting/BillingDetails/index.tsx b/web/src/pages/app/setting/BillingDetails/index.tsx
@@ -22,6 +22,7 @@ import {
 import { useQuery } from "@tanstack/react-query";
 import { useQueryClient } from "@tanstack/react-query";
 import clsx from "clsx";
+import { es, zhCN } from "date-fns/locale";
 
 import { BillingIcon, CalendarIcon, FilterIcon } from "@/components/CommonIcon";
 import EmptyBox from "@/components/EmptyBox";
@@ -45,7 +46,7 @@ const DEFAULT_QUERY_DATA = {
 const STATE_LIST = ["Pending", "Done"];
 
 export default function BillingDetails() {
-  const { t } = useTranslation();
+  const { i18n, t } = useTranslation();
   const { colorMode } = useColorMode();
   const darkMode = colorMode === "dark";
 
@@ -148,6 +149,7 @@ export default function BillingDetails() {
                         <PopoverBody>
                           <DayPicker
                             mode="range"
+                            locale={i18n.language === "en" ? es : zhCN}
                             selected={selectedRange}
                             onSelect={handleRangeSelect}
                             styles={{

diff --git a/web/src/pages/app/setting/RechargeHistory/index.tsx b/web/src/pages/app/setting/RechargeHistory/index.tsx
@@ -21,6 +21,7 @@ import {
 } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
+import { es, zhCN } from "date-fns/locale";
 
 import { CalendarIcon, ChargeIcon, FilterIcon } from "@/components/CommonIcon";
 import EmptyBox from "@/components/EmptyBox";
@@ -42,7 +43,7 @@ const DEFAULT_QUERY_DATA = {
 const STATE_LIST = ["Pending", "Paid", "Failed"];
 
 export default function RechargeHistory() {
-  const { t } = useTranslation();
+  const { i18n, t } = useTranslation();
   const { colorMode } = useColorMode();
   const darkMode = colorMode === "dark";
 
@@ -96,6 +97,7 @@ export default function RechargeHistory() {
                         <PopoverBody>
                           <DayPicker
                             mode="range"
+                            locale={i18n.language === "en" ? es : zhCN}
                             selected={selectedRange}
                             onSelect={handleRangeSelect}
                             styles={{