From e8470b5514dc327304bde1f1b039f02f61f5d2a0 Mon Sep 17 00:00:00 2001 From: Michael F Date: Mon, 27 Nov 2023 15:30:10 +0100 Subject: [PATCH] feat: added dateInView external control & onChange event (#102) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michael Förg --- src/components/datePicker.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/datePicker.tsx b/src/components/datePicker.tsx index efe396c..84c6cac 100644 --- a/src/components/datePicker.tsx +++ b/src/components/datePicker.tsx @@ -33,6 +33,10 @@ export type DatePickerProps = { value: Date | DateRange | null; /** Callback for when the day (range) changes. */ onChange: (value: Date | DateRange | null) => void; + /** Currently visible date. */ + dateInView?: Date; + /** Callback for when the currently visible date changes. */ + onDateInViewChange?: (value: Date) => void; /** If enabled, ranges can be selected. */ rangeSelect?: boolean; /** Which locale to use to render the calendar. */ @@ -293,9 +297,15 @@ export function DatePicker(props: DatePickerProps) { } const mountTime = useMemo(() => new Date(), []); - const [dateInView, setDateInView] = useState(defaultDateInView ?? mountTime); const [dirty, setDirty] = useState>(); const [hovered, setHovered] = useState(); + const [dateInViewLocal, setDateInViewLocal] = useState(defaultDateInView ?? mountTime); + const dateInView = props.dateInView ?? dateInViewLocal; + + function setDateInView(date: Date) { + setDateInViewLocal(date); + props.onDateInViewChange?.(date); + } const min = dirty ? dirty.min : value instanceof Date ? value : value?.min; const max = dirty ? dirty.max : value instanceof Date ? value : value?.max;