Merge branch 'fix/datepicker-locales' into v2

gisce/webclient#1198

src/common/DatePicker.tsx

@@ -5,6 +5,7 @@ import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
 import { Date as DateOoui } from "@gisce/ooui";
 import dayjs from "@/helpers/dayjs";
+import { useDatePickerLocale } from "@/helpers/useDatePickerLocale";
 const { useToken } = theme;
 
 type DatePickerProps = WidgetProps & {
@@ -48,6 +49,7 @@ const DatePickerInput: React.FC<DatePickerInputProps> = (
   const { value, onChange, ooui, showTime } = props;
   const { id, readOnly, required } = ooui as DateOoui;
   const { token } = useToken();
+  const datePickerLocale = useDatePickerLocale();
 
   const requiredStyle =
     required && !readOnly
@@ -91,6 +93,7 @@ const DatePickerInput: React.FC<DatePickerInputProps> = (
       showNow={false}
       showToday={false}
       changeOnBlur={true}
+      locale={datePickerLocale}
     />
   );
 };

src/helpers/useDatePickerLocale.ts

@@ -0,0 +1,15 @@
+import enUS from "antd/es/date-picker/locale/en_US";
+import esES from "antd/es/date-picker/locale/es_ES";
+import caES from "antd/es/date-picker/locale/ca_ES";
+import { useLocale } from "@gisce/react-formiga-components";
+
+const antdLocales = {
+  en_US: enUS,
+  es_ES: esES,
+  ca_ES: caES,
+};
+
+export const useDatePickerLocale = () => {
+  const { locale } = useLocale();
+  return antdLocales[locale];
+};

src/index.ts

@@ -86,6 +86,7 @@ import ActionView from "./views/ActionView";
 import { ErpAllFeatureKeys, ErpFeatureKeys } from "./models/erpFeature";
 import type { ErpFeaturesMap } from "./models/erpFeature";
 import { GraphCard } from "./widgets/views/Graph";
+import dayjs from "./helpers/dayjs";
 
 export {
   Button,
@@ -173,4 +174,5 @@ export {
   ConfigContextProvider,
   HTMLPreview,
   Alert,
+  dayjs,
 };

src/widgets/views/searchFilter/DateRangePicker.tsx

@@ -1,15 +1,18 @@
 import { DatePicker } from "antd";
 
-import React from "react";
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
+import { useDatePickerLocale } from "@/helpers/useDatePickerLocale";
 
 export const DateRangePicker = (props: WidgetProps) => {
+  const datePickerLocale = useDatePickerLocale();
+
   return (
     <Field {...props} layout={"vertical"}>
       <DatePicker.RangePicker
         allowEmpty={[true, true]}
         format={"DD/MM/YYYY"}
+        locale={datePickerLocale}
       ></DatePicker.RangePicker>
     </Field>
   );

src/widgets/views/searchFilter/DateTimeRangePicker.tsx

@@ -4,10 +4,12 @@ import { Field as FieldOoui, Label as LabelOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
 import Label from "@/widgets/base/Label";
 import { TimePicker } from "../../../common/TimePicker";
+import { useDatePickerLocale } from "@/helpers/useDatePickerLocale";
 
 export const DateTimeRangePicker = (props: WidgetProps) => {
   const { ooui, showLabel = false } = props;
   const { label, id } = ooui;
+  const datePickerLocale = useDatePickerLocale();
 
   const fields = [
     new FieldOoui({
@@ -42,6 +44,7 @@ export const DateTimeRangePicker = (props: WidgetProps) => {
               className="w-60"
               allowEmpty={[true, true]}
               format={"DD/MM/YYYY"}
+              locale={datePickerLocale}
             ></DatePicker.RangePicker>
           </Field>
         </Col>