From 45ef36695bffd3000545b42107f23f57fbcaaeeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Gu=CC=88ell=20Segarra?= Date: Wed, 11 Jun 2025 12:18:02 +0200 Subject: [PATCH 1/2] feat: migrate datepickers and helpers to formiga-components https://github.com/gisce/webclient/issues/2198 --- src/common/DatePicker.helpers.ts | 137 --------- src/common/DatePicker.tsx | 163 +---------- src/common/useDatePickerHandlers.ts | 103 ------- src/helpers/useDatePickerLocale.ts | 15 - .../widgets/form/DatePicker.stories.tsx | 263 ------------------ src/widgets/views/Tree/treeComponents.tsx | 25 +- .../views/searchFilter/DateRangePicker.tsx | 15 +- 7 files changed, 17 insertions(+), 704 deletions(-) delete mode 100644 src/common/DatePicker.helpers.ts delete mode 100644 src/common/useDatePickerHandlers.ts delete mode 100644 src/helpers/useDatePickerLocale.ts delete mode 100644 src/stories/widgets/form/DatePicker.stories.tsx diff --git a/src/common/DatePicker.helpers.ts b/src/common/DatePicker.helpers.ts deleted file mode 100644 index 70985e82c..000000000 --- a/src/common/DatePicker.helpers.ts +++ /dev/null @@ -1,137 +0,0 @@ -import { Dayjs } from "dayjs"; - -export type DateMode = "date" | "time"; - -export const DatePickerConfig = { - date: { - placeholder: "__/__/____", - dateDisplayFormat: "DD/MM/YYYY", - dateInternalFormat: "YYYY-MM-DD", - }, - time: { - placeholder: "__/__/____ __:__:__", - dateDisplayFormat: "DD/MM/YYYY HH:mm:ss", - dateInternalFormat: "YYYY-MM-DD HH:mm:ss", - }, -} as const; - -export type DateTimePatterns = { - day: RegExp; - dayMonth: RegExp; - fullDate: RegExp; - withHours: RegExp; - withMinutes: RegExp; - withSeconds: RegExp; -}; - -export const createFormatRegex = (format: string): RegExp => { - return new RegExp( - "^" + - format - .replace(/DD/g, "\\d{2}") - .replace(/MM/g, "\\d{2}") - .replace(/YYYY/g, "\\d{4}") - .replace(/HH/g, "\\d{2}") - .replace(/mm/g, "\\d{2}") - .replace(/ss/g, "\\d{2}") - .replace(/\//g, "\\/") - .replace(/\s/g, "\\s") + - "$", - ); -}; - -export const createDateTimePatterns = (): DateTimePatterns => ({ - day: createFormatRegex("DD"), - dayMonth: createFormatRegex("DD/MM"), - fullDate: createFormatRegex("DD/MM/YYYY"), - withHours: createFormatRegex("DD/MM/YYYY HH"), - withMinutes: createFormatRegex("DD/MM/YYYY HH:mm"), - withSeconds: createFormatRegex("DD/MM/YYYY HH:mm:ss"), -}); - -type UpdateDateTimeParams = { - currentValue: string | undefined; - now: Dayjs; - mode: DateMode; - showTime: boolean; - onChange: (value: string) => void; -}; - -export const updateDateTime = (params: UpdateDateTimeParams) => { - const { currentValue, now, mode, showTime, onChange } = params; - const patterns = createDateTimePatterns(); - - // Handle undefined or empty value - if (!currentValue || currentValue.trim() === "") { - onChange(now.format(DatePickerConfig[mode].dateInternalFormat)); - return; - } - - // Handle day only - if (patterns.day.test(currentValue)) { - const newDate = now.date(parseInt(currentValue)); - onChange(newDate.format(DatePickerConfig[mode].dateInternalFormat)); - } - - // Handle day and month - if (patterns.dayMonth.test(currentValue)) { - const [day, month] = currentValue.split("/").map((n) => parseInt(n)); - const newDate = now.date(day).month(month - 1); - onChange(newDate.format(DatePickerConfig[mode].dateInternalFormat)); - } - - // Handle full date - if (patterns.fullDate.test(currentValue)) { - const [day, month, year] = currentValue.split("/").map((n) => parseInt(n)); - const newDate = now - .date(day) - .month(month - 1) - .year(year); - - if (!showTime) { - onChange(newDate.format(DatePickerConfig.date.dateInternalFormat)); - } - - onChange(newDate.format(DatePickerConfig.time.dateInternalFormat)); - } - - // Handle time components - if (showTime) { - const [datePart, timePart] = currentValue.split(" "); - const [day, month, year] = datePart.split("/").map((n) => parseInt(n)); - let newDate = now - .date(day) - .month(month - 1) - .year(year); - - if (patterns.withHours.test(currentValue)) { - const [hours] = timePart.split(":").map((n) => parseInt(n)); - newDate = newDate.hour(hours); - onChange(newDate.format(DatePickerConfig.time.dateInternalFormat)); - } - - if (patterns.withMinutes.test(currentValue)) { - const [hours, minutes] = timePart.split(":").map((n) => parseInt(n)); - newDate = newDate.hour(hours).minute(minutes); - onChange(newDate.format(DatePickerConfig.time.dateInternalFormat)); - } - } -}; - -export const shouldHandleEnter = ( - currentValue: string, - showTime: boolean, -): boolean => { - if (!currentValue) return true; - - const patterns = createDateTimePatterns(); - return ( - patterns.day.test(currentValue) || - patterns.dayMonth.test(currentValue) || - patterns.fullDate.test(currentValue) || - (showTime && - (patterns.fullDate.test(currentValue) || - patterns.withHours.test(currentValue) || - patterns.withMinutes.test(currentValue))) - ); -}; diff --git a/src/common/DatePicker.tsx b/src/common/DatePicker.tsx index 087628ee6..b624120d0 100644 --- a/src/common/DatePicker.tsx +++ b/src/common/DatePicker.tsx @@ -1,169 +1,28 @@ -import { DatePicker as AntDatePicker, theme, Tooltip } from "antd"; -import React, { useCallback, useMemo, memo, useState } from "react"; +import { memo } from "react"; import Field from "@/common/Field"; import { WidgetProps } from "@/types"; -import { Date as DateOoui, DateTime } from "@gisce/ooui"; -import { Dayjs } from "dayjs"; -import dayjs from "@/helpers/dayjs"; -import { useDatePickerLocale } from "@/helpers/useDatePickerLocale"; -import { DateMode, DatePickerConfig } from "./DatePicker.helpers"; -import { useDatePickerHandlers } from "./useDatePickerHandlers"; - -const { useToken } = theme; +import { DateTime } from "@gisce/ooui"; +import { DateInput } from "@gisce/react-formiga-components"; type DatePickerProps = WidgetProps & { showTime?: boolean; }; -type DatePickerInputProps = { - ooui: DateTime; - value?: string; - onChange?: (value: string | null | undefined) => void; - showTime?: boolean; -}; - -const useRequiredStyle = (required: boolean, readOnly: boolean) => { - const { token } = useToken(); - - return useMemo( - () => - required && !readOnly - ? { backgroundColor: token.colorPrimaryBg } - : undefined, - [required, readOnly, token.colorPrimaryBg], - ); -}; - const DatePicker = (props: DatePickerProps) => { const { ooui, showTime = false } = props; - const { required } = ooui; + const { required, readOnly = false, timezone } = ooui as DateTime; return ( - + ); }; -const parseDateSafely = ( - value: string, - format: string, - timezone?: string, -): Dayjs | null => { - try { - return dayjs.tz(value, format, timezone); - } catch (e) { - console.error("Parse error:", e); - return null; - } -}; - -const DatePickerInput: React.FC = memo( - (props: DatePickerInputProps) => { - const { value, onChange, ooui, showTime } = props; - const { - id, - readOnly, - required, - timezone = "Europe/Madrid", // TODO: This is hardcoded because server assumes this TZ for the moment - } = ooui; - const datePickerLocale = useDatePickerLocale(); - const requiredStyle = useRequiredStyle(required, !!readOnly); - const mode: DateMode = showTime ? "time" : "date"; - const [parseError, setParseError] = useState(null); - - const internalFormat = DatePickerConfig[mode].dateInternalFormat; - - // Parse date value using the timezone from ooui - const dateValue = useMemo(() => { - if (!value) return undefined; - - try { - const parsed = parseDateSafely(value, internalFormat, timezone); - - if (!parsed || !parsed.isValid()) { - throw new Error("Invalid date format"); - } - - setParseError(null); - return parsed; - } catch (error) { - console.error({ error, value, timezone, mode }); - const errorMessage = - error instanceof Error ? error.message : "Invalid date"; - setParseError(errorMessage); - return undefined; - } - }, [value, internalFormat, timezone, mode]); - - const handleChange = useCallback( - (momentDate: Dayjs | null) => { - if (!momentDate) { - onChange?.(null); - return; - } - try { - const formattedDate = momentDate.format(internalFormat); - setParseError(null); - onChange?.(formattedDate); - } catch (error) { - console.error({ error, timezone, mode }); - const errorMessage = - error instanceof Error ? error.message : "Invalid date"; - setParseError(errorMessage); - } - }, - [onChange, timezone, internalFormat, mode], - ); - - const { handleKeyDown, handleBlur } = useDatePickerHandlers({ - mode, - showTime, - onChange, - }); - - const pickerConfig = useMemo( - () => ({ - style: { - width: "100%", - ...requiredStyle, - ...(parseError && { borderColor: "#ff4d4f" }), - }, - placeholder: DatePickerConfig[mode].placeholder, - format: DatePickerConfig[mode].dateDisplayFormat, - }), - [mode, requiredStyle, parseError], - ); - - return ( - - handleBlur(e as any)} - onKeyDown={(e) => handleKeyDown(e as any)} - showNow={false} - showToday={false} - locale={datePickerLocale} - status={parseError ? "error" : undefined} - /> - - ); - }, -); - -DatePickerInput.displayName = "DatePickerInput"; - -export { DatePickerInput }; export default memo(DatePicker); diff --git a/src/common/useDatePickerHandlers.ts b/src/common/useDatePickerHandlers.ts deleted file mode 100644 index dc56c1198..000000000 --- a/src/common/useDatePickerHandlers.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { useCallback, useRef } from "react"; -import dayjs from "@/helpers/dayjs"; -import { - DateMode, - DatePickerConfig, - shouldHandleEnter, - updateDateTime, -} from "./DatePicker.helpers"; - -type UseDatePickerHandlersParams = { - mode: DateMode; - showTime?: boolean; - onChange?: (value: string | null | undefined) => void; -}; - -export const useDatePickerHandlers = ({ - mode, - showTime = false, - onChange, -}: UseDatePickerHandlersParams) => { - const escapeHandled = useRef(false); - - const handleBlur = useCallback( - (e: React.FocusEvent) => { - const input = e.target; - if (input.value) { - const dayJsDate = dayjs( - input.value, - DatePickerConfig[mode].dateDisplayFormat, - ).format(DatePickerConfig[mode].dateInternalFormat); - onChange?.(dayJsDate); - } - }, - [mode, onChange], - ); - - const handleKeyDown = useCallback( - (e: React.KeyboardEvent) => { - // If the event was already handled by a parent component, don't handle it again - if (e.defaultPrevented) { - return; - } - - if (e.key === "Enter") { - const input = e.target as HTMLInputElement; - const currentValue = input.value; - - if (!shouldHandleEnter(currentValue, showTime)) { - return; - } - - e.preventDefault(); - - updateDateTime({ - currentValue, - now: dayjs(), - mode, - showTime, - onChange: (value) => onChange?.(value), - }); - } else if (e.key === "Escape" && !escapeHandled.current) { - escapeHandled.current = true; - // Reset the flag after a short delay - setTimeout(() => { - escapeHandled.current = false; - }, 200); - - e.preventDefault(); - e.stopPropagation(); // Stop the event from bubbling up - - const input = e.currentTarget; - if (input.value === "") { - onChange?.(null); - } else { - const dayJsDate = dayjs( - input.value, - DatePickerConfig[mode].dateDisplayFormat, - ).format(DatePickerConfig[mode].dateInternalFormat); - onChange?.(dayJsDate); - } - - const focusableElements = - 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'; - const elements = Array.from( - document.querySelectorAll(focusableElements), - ) as HTMLElement[]; - const index = elements.indexOf(input); - - setTimeout(() => { - if (index > -1 && index < elements.length - 1) { - elements[index + 1].focus(); - } - }, 100); - } - }, - [showTime, mode, onChange], - ); - - return { - handleKeyDown, - handleBlur, - }; -}; diff --git a/src/helpers/useDatePickerLocale.ts b/src/helpers/useDatePickerLocale.ts deleted file mode 100644 index 3f8c575bd..000000000 --- a/src/helpers/useDatePickerLocale.ts +++ /dev/null @@ -1,15 +0,0 @@ -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]; -}; diff --git a/src/stories/widgets/form/DatePicker.stories.tsx b/src/stories/widgets/form/DatePicker.stories.tsx deleted file mode 100644 index 053a22bc7..000000000 --- a/src/stories/widgets/form/DatePicker.stories.tsx +++ /dev/null @@ -1,263 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { Meta, StoryFn } from "@storybook/react"; -import DatePicker, { DatePickerInput } from "@/common/DatePicker"; -import { Form } from "antd"; -import { Date as DateOoui } from "@gisce/ooui"; -import dayjs from "@/helpers/dayjs"; -import { WidgetProps } from "@/types"; - -type DatePickerStoryProps = WidgetProps & { - showTime?: boolean; - value?: string; - timezone?: string; -}; - -export default { - title: "Widgets/Form/DateTime", - component: DatePicker, - parameters: { - layout: "centered", - }, - argTypes: { - timezone: { - control: "select", - options: [ - "UTC", - "Europe/Madrid", - "Europe/London", - "America/New_York", - "Asia/Tokyo", - "Australia/Sydney", - ], - description: "Timezone for the date picker", - defaultValue: "UTC", - }, - }, -} as Meta; - -const Template: StoryFn = (args) => { - const [form] = Form.useForm(); - const fieldName = (args.ooui as DateOoui).id; - const [currentValue, setCurrentValue] = useState( - args.value, - ); - - // Set initial values when args.value changes - useEffect(() => { - if (args.value) { - form.setFieldsValue({ [fieldName]: args.value }); - setCurrentValue(args.value); - } - }, [args.value, form, fieldName]); - - return ( -
-
{ - const newValue = form.getFieldValue(fieldName); - setCurrentValue(newValue); - }} - > - - form.setFieldValue(fieldName, value)} - /> - -
- Debug Information: - 
String value: {currentValue}
- 
timezone: {args.timezone}
-
-
-
- ); -}; - -// Date picker with time -export const Basic = Template.bind({}); -Basic.args = { - ooui: new DateOoui({}), - value: "2024-03-10 14:30:00", - showTime: true, - timezone: "UTC", -}; - -// Required field -export const Required = Template.bind({}); -Required.args = { - ooui: new DateOoui({ - required: true, - }), - value: "2024-03-10 14:30:00", - showTime: true, - timezone: "UTC", -}; - -// Read-only field -export const ReadOnly = Template.bind({}); -ReadOnly.args = { - ooui: new DateOoui({ - readonly: true, - }), - value: dayjs().format("YYYY-MM-DD HH:mm:ss"), - showTime: true, - timezone: "UTC", -}; - -// Invalid date handling -export const InvalidDate = Template.bind({}); -InvalidDate.args = { - ooui: new DateOoui({}), - value: "invalid-date", // Should show error state - showTime: true, - timezone: "UTC", -}; - -// Timezone in OOUI - Madrid -export const TimezoneInOouiMadrid = Template.bind({}); -TimezoneInOouiMadrid.args = { - ooui: new DateOoui({}), - value: "2025-05-26 12:00:00", - showTime: true, - timezone: "Europe/Madrid", -}; - -// Timezone in OOUI - Tokyo -export const TimezoneInOouiTokyo = Template.bind({}); -TimezoneInOouiTokyo.args = { - ooui: new DateOoui({}), - value: "2025-05-26 21:00:00", - showTime: true, - timezone: "Asia/Tokyo", -}; - -// Timezone in OOUI - UTC -export const TimezoneInOouiUTC = Template.bind({}); -TimezoneInOouiUTC.args = { - ooui: new DateOoui({}), - value: "2025-05-26 12:00:00", - showTime: true, - timezone: "UTC", -}; - -// DST Edge Cases - Madrid (Start of DST) -export const DSTStartMadrid = Template.bind({}); -DSTStartMadrid.args = { - ooui: new DateOoui({}), - value: "2025-03-30 01:59:59", // Just before DST starts - showTime: true, - timezone: "Europe/Madrid", -}; - -// DST Edge Cases - Madrid (End of DST) -export const DSTEndMadrid = Template.bind({}); -DSTEndMadrid.args = { - ooui: new DateOoui({}), - value: "2025-10-26 02:59:59", // Just before DST ends - showTime: true, - timezone: "Europe/Madrid", -}; - -// DST Edge Cases - UTC Reference -export const UTCReference = Template.bind({}); -UTCReference.args = { - ooui: new DateOoui({}), - value: "2025-03-30 00:59:59", // Reference time in UTC - showTime: true, - timezone: "UTC", -}; - -// DST Transition - Madrid Spring Forward (Missing Hour) -export const DSTMadridSpringForward = Template.bind({}); -DSTMadridSpringForward.args = { - ooui: new DateOoui({}), - value: "2025-03-30 02:00:00", // This hour doesn't exist due to spring forward - showTime: true, - timezone: "Europe/Madrid", -}; - -// DST Transition - Madrid Fall Back (Ambiguous First Hour) -export const DSTMadridFallBackFirst = Template.bind({}); -DSTMadridFallBackFirst.args = { - ooui: new DateOoui({}), - value: "2025-10-26 02:00:00", // First occurrence of 2 AM - showTime: true, - timezone: "Europe/Madrid", -}; - -// DST Transition - Madrid Fall Back (Ambiguous Second Hour) -export const DSTMadridFallBackSecond = Template.bind({}); -DSTMadridFallBackSecond.args = { - ooui: new DateOoui({}), - value: "2025-10-26 02:00:00", // Second occurrence of 2 AM - showTime: true, - timezone: "Europe/Madrid", -}; - -// DST Transition - UTC Reference for Madrid Spring Forward -export const DSTUtcSpringForward = Template.bind({}); -DSTUtcSpringForward.args = { - ooui: new DateOoui({}), - value: "2025-03-30 01:00:00", // UTC time during Madrid's spring forward - showTime: true, - timezone: "UTC", -}; - -// DST Transition - UTC Reference for Madrid Fall Back -export const DSTUtcFallBack = Template.bind({}); -DSTUtcFallBack.args = { - ooui: new DateOoui({}), - value: "2025-10-26 01:00:00", // UTC time during Madrid's fall back - showTime: true, - timezone: "UTC", -}; - -// UTC Edge Case - Specific UTC Time -export const SpecificUTCTime = Template.bind({}); -SpecificUTCTime.args = { - ooui: new DateOoui({}), - value: "2023-03-26 02:00:00", // Specific UTC time - showTime: true, - timezone: "UTC", -}; - -// UTC Edge Case - UTC to Madrid DST Transition -export const UTCToMadridDST = Template.bind({}); -UTCToMadridDST.args = { - ooui: new DateOoui({}), - value: "2023-03-26 02:00:00", // UTC time during Madrid's DST transition - showTime: true, - timezone: "Europe/Madrid", -}; - -// UTC Edge Case - UTC Midnight Transition -export const UTCMidnightTransition = Template.bind({}); -UTCMidnightTransition.args = { - ooui: new DateOoui({}), - value: "2023-03-26 00:00:00", // UTC midnight - showTime: true, - timezone: "UTC", -}; - -// UTC Edge Case - UTC to Tokyo (Next Day) -export const UTCToTokyoNextDay = Template.bind({}); -UTCToTokyoNextDay.args = { - ooui: new DateOoui({}), - value: "2023-03-26 15:00:00", // UTC time that results in next day in Tokyo - showTime: true, - timezone: "Asia/Tokyo", -}; - -// UTC Edge Case - UTC Last Second of Day -export const UTCLastSecond = Template.bind({}); -UTCLastSecond.args = { - ooui: new DateOoui({}), - value: "2023-03-26 23:59:59", // Last second of the UTC day - showTime: true, - timezone: "UTC", -}; diff --git a/src/widgets/views/Tree/treeComponents.tsx b/src/widgets/views/Tree/treeComponents.tsx index 3ae821b3c..248b4a30e 100644 --- a/src/widgets/views/Tree/treeComponents.tsx +++ b/src/widgets/views/Tree/treeComponents.tsx @@ -6,7 +6,6 @@ import { One2manyValue } from "../../base/one2many/One2manyInput"; import { Interweave } from "interweave"; import { Many2oneTree } from "../../base/many2one/Many2oneTree"; import { ReferenceTree } from "../../base/ReferenceTree"; -import dayjs from "@/helpers/dayjs"; import Avatar from "../../custom/Avatar"; import { CustomTag, TagInput } from "../../custom/Tag"; import ConnectionProvider from "@/ConnectionProvider"; @@ -18,9 +17,9 @@ import { DateTime, Many2one as Many2oneOoui, } from "@gisce/ooui"; -import { DatePickerConfig } from "@/common/DatePicker.helpers"; import { useActionViewContext } from "@/context/ActionViewContext"; import { useOne2manyContext } from "@/context/One2manyContext"; +import { DateValue, DateTimeValue } from "@gisce/react-formiga-components"; export const BooleanComponent = ({ value, @@ -120,15 +119,7 @@ export const TextComponent = ({ value }: { value: any }): ReactElement => { }; export const DateComponent = ({ value }: { value: any }): ReactElement => { - return useMemo(() => { - if (!value || (value && value.length === 0)) return <>; - - const formattedValue = dayjs( - value, - DatePickerConfig.date.dateInternalFormat, - ).format(DatePickerConfig.date.dateDisplayFormat); - return <>{formattedValue}; - }, [value]); + return ; }; export const CharComponent = ({ @@ -157,17 +148,7 @@ export const DateTimeComponent = ({ value: any; ooui: DateTime; }): ReactElement => { - return useMemo(() => { - if (!value || (value && value.length === 0)) return <>; - const formattedValue = dayjs - .tz( - value, - DatePickerConfig.time.dateInternalFormat, - ooui.timezone || "Europe/Madrid", - ) - .format(DatePickerConfig.time.dateDisplayFormat); - return <>{formattedValue}; - }, [value, ooui.timezone]); + return ; }; export const One2ManyComponent = ({ diff --git a/src/widgets/views/searchFilter/DateRangePicker.tsx b/src/widgets/views/searchFilter/DateRangePicker.tsx index d4f6a1e22..0c291847a 100644 --- a/src/widgets/views/searchFilter/DateRangePicker.tsx +++ b/src/widgets/views/searchFilter/DateRangePicker.tsx @@ -1,8 +1,6 @@ -import { DatePicker } from "antd"; - import Field from "@/common/Field"; import { WidgetProps } from "@/types"; -import { useDatePickerLocale } from "@/helpers/useDatePickerLocale"; +import { DateRangeInput } from "@gisce/react-formiga-components"; interface DateRangePickerProps extends WidgetProps { className?: string; @@ -10,18 +8,11 @@ interface DateRangePickerProps extends WidgetProps { } export const DateRangePicker = (props: DateRangePickerProps) => { - const { className = "w-full", layout = "vertical" } = props; - const datePickerLocale = useDatePickerLocale(); + const { className, layout = "vertical" } = props; return ( - + ); }; From 3f28a66c790084f579542e251d1b4d796b6357b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Gu=CC=88ell=20Segarra?= Date: Wed, 11 Jun 2025 15:07:47 +0200 Subject: [PATCH 2/2] fix: daterangepicker issues --- src/widgets/views/searchFilter/DateRangePicker.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/widgets/views/searchFilter/DateRangePicker.tsx b/src/widgets/views/searchFilter/DateRangePicker.tsx index 0c291847a..c7be8532e 100644 --- a/src/widgets/views/searchFilter/DateRangePicker.tsx +++ b/src/widgets/views/searchFilter/DateRangePicker.tsx @@ -1,6 +1,7 @@ +import { DatePicker } from "antd"; import Field from "@/common/Field"; import { WidgetProps } from "@/types"; -import { DateRangeInput } from "@gisce/react-formiga-components"; +import { useDatePickerLocale } from "@gisce/react-formiga-components"; interface DateRangePickerProps extends WidgetProps { className?: string; @@ -8,11 +9,18 @@ interface DateRangePickerProps extends WidgetProps { } export const DateRangePicker = (props: DateRangePickerProps) => { - const { className, layout = "vertical" } = props; + const { className = "w-full", layout = "vertical" } = props; + const datePickerLocale = useDatePickerLocale(); return ( - + ); };