diff --git a/packages/ui/src/components/Datepicker/Datepicker.stories.tsx b/packages/ui/src/components/Datepicker/Datepicker.stories.tsx index 49109c2dc..354773947 100644 --- a/packages/ui/src/components/Datepicker/Datepicker.stories.tsx +++ b/packages/ui/src/components/Datepicker/Datepicker.stories.tsx @@ -129,6 +129,7 @@ DateValueSet.args = { minDate: undefined, maxDate: undefined, language: "en", + defaultValue: new Date(), theme: {}, }; diff --git a/packages/ui/src/components/Datepicker/Datepicker.tsx b/packages/ui/src/components/Datepicker/Datepicker.tsx index e93d5026f..95d308fad 100644 --- a/packages/ui/src/components/Datepicker/Datepicker.tsx +++ b/packages/ui/src/components/Datepicker/Datepicker.tsx @@ -111,7 +111,7 @@ const DatepickerRender: ForwardRefRenderFunction labelClearButton = "Clear", showTodayButton = true, labelTodayButton = "Today", - defaultValue = new Date(), + defaultValue, minDate, maxDate, language = "en", @@ -126,10 +126,7 @@ const DatepickerRender: ForwardRefRenderFunction ref, ) => { const theme = mergeDeep(getTheme().datepicker, customTheme); - - const effectiveDefaultValue = useMemo(() => { - return getFirstDateInRange(defaultValue, minDate, maxDate); - }, []); + const initialDate = defaultValue ? getFirstDateInRange(defaultValue, minDate, maxDate) : null; const effectiveDefaultView = useMemo(() => { return defaultValue ? getFirstDateInRange(defaultValue, minDate, maxDate) : new Date(); @@ -138,7 +135,7 @@ const DatepickerRender: ForwardRefRenderFunction const [isOpen, setIsOpen] = useState(open); const [view, setView] = useState(Views.Days); // selectedDate is the date selected by the user - const [selectedDate, setSelectedDate] = useState(value ?? effectiveDefaultValue); + const [selectedDate, setSelectedDate] = useState(value ?? initialDate); // viewDate is only for navigation const [viewDate, setViewDate] = useState(value ?? effectiveDefaultView); @@ -159,7 +156,7 @@ const DatepickerRender: ForwardRefRenderFunction }; const clearDate = () => { - changeSelectedDate(defaultValue, true); + changeSelectedDate(initialDate, true); if (defaultValue) { setViewDate(defaultValue); } @@ -257,7 +254,7 @@ const DatepickerRender: ForwardRefRenderFunction setSelectedDate(effectiveValue); } if (selectedDate == null) { - setSelectedDate(effectiveDefaultValue); + setSelectedDate(initialDate); } }, [value, setSelectedDate, setViewDate, selectedDate]); @@ -296,7 +293,7 @@ const DatepickerRender: ForwardRefRenderFunction }} value={displayValue} readOnly - defaultValue={effectiveDefaultValue ? getFormattedDate(language, effectiveDefaultValue) : label} + defaultValue={initialDate ? getFormattedDate(language, initialDate) : label} {...props} /> )}