From b58c32f03e89f0b409a26d51f4ff3a8576821a74 Mon Sep 17 00:00:00 2001 From: balajis-qb Date: Tue, 25 Nov 2025 11:54:13 +0530 Subject: [PATCH 1/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20DatePicker?= =?UTF-8?q?=20onChange=20handlers=20to=20use=20setSelectedDate=20directly?= =?UTF-8?q?=20in=20examples?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updated multiple DatePicker components across various example files to simplify the onChange handler by directly using setSelectedDate instead of wrapping it in an arrow function. This change enhances code readability and consistency and avoid the unnecessary wrapper --- docs-site/src/examples/ts/calendarContainer.tsx | 2 +- docs-site/src/examples/ts/calendarIcon.tsx | 6 +----- docs-site/src/examples/ts/calendarIconExternal.tsx | 2 +- docs-site/src/examples/ts/calendarIconSvgIcon.tsx | 2 +- docs-site/src/examples/ts/calendarStartDay.tsx | 2 +- docs-site/src/examples/ts/children.tsx | 5 +---- docs-site/src/examples/ts/clearInput.tsx | 2 +- docs-site/src/examples/ts/closeOnScroll.tsx | 2 +- docs-site/src/examples/ts/closeOnScrollCallback.tsx | 2 +- docs-site/src/examples/ts/configureFloatingUI.tsx | 2 +- docs-site/src/examples/ts/customCalendarClassName.tsx | 2 +- docs-site/src/examples/ts/customClassName.tsx | 2 +- docs-site/src/examples/ts/customDateFormat.tsx | 2 +- docs-site/src/examples/ts/customDayClassName.tsx | 2 +- docs-site/src/examples/ts/customInput.tsx | 2 +- docs-site/src/examples/ts/customTimeClassName.tsx | 2 +- docs-site/src/examples/ts/customTimeInput.tsx | 2 +- docs-site/src/examples/ts/dateRange.tsx | 4 ++-- .../src/examples/ts/dateRangeInputWithClearButton.tsx | 4 +--- docs-site/src/examples/ts/dateRangeWithPortal.tsx | 4 +--- docs-site/src/examples/ts/default.tsx | 11 +++++------ docs-site/src/examples/ts/disabled.tsx | 2 +- docs-site/src/examples/ts/disabledInline.tsx | 2 +- .../src/examples/ts/disabledKeyboardNavigation.tsx | 2 +- docs-site/src/examples/ts/dontCloseOnSelect.tsx | 2 +- docs-site/src/examples/ts/excludeDateIntervals.tsx | 2 +- docs-site/src/examples/ts/excludeDates.tsx | 2 +- docs-site/src/examples/ts/excludeDatesMonthPicker.tsx | 2 +- docs-site/src/examples/ts/excludeDatesWithMessage.tsx | 2 +- docs-site/src/examples/ts/excludeTimePeriod.tsx | 2 +- docs-site/src/examples/ts/excludeTimes.tsx | 2 +- docs-site/src/examples/ts/excludeWeeks.tsx | 2 +- docs-site/src/examples/ts/externalForm.tsx | 2 +- docs-site/src/examples/ts/filterDates.tsx | 2 +- docs-site/src/examples/ts/filterTimes.tsx | 2 +- docs-site/src/examples/ts/fixedCalendar.tsx | 2 +- docs-site/src/examples/ts/hideTimeCaption.tsx | 2 +- docs-site/src/examples/ts/highlightDates.tsx | 2 +- docs-site/src/examples/ts/highlightDatesRanges.tsx | 2 +- docs-site/src/examples/ts/holidayDates.tsx | 2 +- docs-site/src/examples/ts/includeDateIntervals.tsx | 2 +- docs-site/src/examples/ts/includeDates.tsx | 2 +- docs-site/src/examples/ts/includeDatesMonthPicker.tsx | 2 +- docs-site/src/examples/ts/includeTimes.tsx | 2 +- docs-site/src/examples/ts/injectTimes.tsx | 2 +- docs-site/src/examples/ts/inline.tsx | 6 +----- docs-site/src/examples/ts/locale.tsx | 2 +- docs-site/src/examples/ts/localeWithTime.tsx | 2 +- .../src/examples/ts/localeWithoutGlobalVariable.tsx | 2 +- docs-site/src/examples/ts/maxDate.tsx | 2 +- docs-site/src/examples/ts/minDate.tsx | 2 +- docs-site/src/examples/ts/monthDropdown.tsx | 2 +- docs-site/src/examples/ts/monthDropdownShort.tsx | 2 +- docs-site/src/examples/ts/monthPicker.tsx | 2 +- docs-site/src/examples/ts/monthPickerFourColumns.tsx | 2 +- docs-site/src/examples/ts/monthPickerFullName.tsx | 2 +- docs-site/src/examples/ts/monthPickerTwoColumns.tsx | 2 +- docs-site/src/examples/ts/monthYearDropdown.tsx | 2 +- docs-site/src/examples/ts/multiMonth.tsx | 2 +- docs-site/src/examples/ts/multiMonthDropdown.tsx | 2 +- docs-site/src/examples/ts/multiMonthInline.tsx | 2 +- docs-site/src/examples/ts/multiMonthPrevious.tsx | 2 +- docs-site/src/examples/ts/noAnchorArrow.tsx | 2 +- docs-site/src/examples/ts/onBlurCallbacks.tsx | 2 +- .../src/examples/ts/onCalendarOpenStateCallbacks.tsx | 2 +- docs-site/src/examples/ts/openToDate.tsx | 2 +- docs-site/src/examples/ts/portal.tsx | 6 +----- docs-site/src/examples/ts/portalById.tsx | 2 +- docs-site/src/examples/ts/quarterPicker.tsx | 2 +- docs-site/src/examples/ts/rangeMonthPicker.tsx | 4 ++-- docs-site/src/examples/ts/rangeQuarterPicker.tsx | 4 ++-- docs-site/src/examples/ts/rangeYearPicker.tsx | 4 ++-- docs-site/src/examples/ts/rawChange.tsx | 2 +- docs-site/src/examples/ts/readOnly.tsx | 2 +- docs-site/src/examples/ts/renderCustomDay.tsx | 2 +- docs-site/src/examples/ts/renderCustomHeader.tsx | 2 +- .../src/examples/ts/renderCustomHeaderTwoMonths.tsx | 2 +- docs-site/src/examples/ts/showTime.tsx | 2 +- docs-site/src/examples/ts/showTimeOnly.tsx | 2 +- docs-site/src/examples/ts/specificDateRange.tsx | 2 +- docs-site/src/examples/ts/strictParsing.tsx | 2 +- docs-site/src/examples/ts/timeInput.tsx | 2 +- docs-site/src/examples/ts/today.tsx | 2 +- .../src/examples/ts/toggleCalendarOnIconClick.tsx | 2 +- docs-site/src/examples/ts/weekNumbers.tsx | 2 +- docs-site/src/examples/ts/weekPicker.tsx | 2 +- docs-site/src/examples/ts/withPortalById.tsx | 2 +- docs-site/src/examples/ts/yearDropdown.tsx | 2 +- docs-site/src/examples/ts/yearItemNumber.tsx | 2 +- docs-site/src/examples/ts/yearPicker.tsx | 2 +- docs-site/src/examples/ts/yearSelectDropdown.tsx | 2 +- 91 files changed, 99 insertions(+), 119 deletions(-) diff --git a/docs-site/src/examples/ts/calendarContainer.tsx b/docs-site/src/examples/ts/calendarContainer.tsx index a520b52aa1..27d9c9645d 100644 --- a/docs-site/src/examples/ts/calendarContainer.tsx +++ b/docs-site/src/examples/ts/calendarContainer.tsx @@ -23,7 +23,7 @@ const CustomCalendarContainer = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} calendarContainer={MyContainer} /> ); diff --git a/docs-site/src/examples/ts/calendarIcon.tsx b/docs-site/src/examples/ts/calendarIcon.tsx index 3afb0aff53..f150164d00 100644 --- a/docs-site/src/examples/ts/calendarIcon.tsx +++ b/docs-site/src/examples/ts/calendarIcon.tsx @@ -2,11 +2,7 @@ const CalendarIcon = () => { const [selectedDate, setSelectedDate] = useState(new Date()); return ( - setSelectedDate(date)} - /> + ); }; diff --git a/docs-site/src/examples/ts/calendarIconExternal.tsx b/docs-site/src/examples/ts/calendarIconExternal.tsx index 0971c089d8..674a83a6ea 100644 --- a/docs-site/src/examples/ts/calendarIconExternal.tsx +++ b/docs-site/src/examples/ts/calendarIconExternal.tsx @@ -5,7 +5,7 @@ const CalendarIconExternal = () => { setSelectedDate(date)} + onChange={setSelectedDate} icon="fa fa-calendar" /> ); diff --git a/docs-site/src/examples/ts/calendarIconSvgIcon.tsx b/docs-site/src/examples/ts/calendarIconSvgIcon.tsx index 75bfd3ccd9..fd26335007 100644 --- a/docs-site/src/examples/ts/calendarIconSvgIcon.tsx +++ b/docs-site/src/examples/ts/calendarIconSvgIcon.tsx @@ -5,7 +5,7 @@ const CalendarIconSvgIcon = () => { setSelectedDate(date)} + onChange={setSelectedDate} icon={ { return ( setSelectedDate(date)} + onChange={setSelectedDate} calendarStartDay={3} /> ); diff --git a/docs-site/src/examples/ts/children.tsx b/docs-site/src/examples/ts/children.tsx index 599c2f1fe7..17676b35aa 100644 --- a/docs-site/src/examples/ts/children.tsx +++ b/docs-site/src/examples/ts/children.tsx @@ -2,10 +2,7 @@ const Children = () => { const [selectedDate, setSelectedDate] = useState(new Date()); return ( - setSelectedDate(date)} - > +
Don't forget to check the weather!
 ); diff --git a/docs-site/src/examples/ts/clearInput.tsx b/docs-site/src/examples/ts/clearInput.tsx index 88132933c9..ffadb9eb4f 100644 --- a/docs-site/src/examples/ts/clearInput.tsx +++ b/docs-site/src/examples/ts/clearInput.tsx @@ -4,7 +4,7 @@ const ClearInput = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} isClearable placeholderText="I have been cleared!" /> diff --git a/docs-site/src/examples/ts/closeOnScroll.tsx b/docs-site/src/examples/ts/closeOnScroll.tsx index 5a8dc27c8d..f3629b70dd 100644 --- a/docs-site/src/examples/ts/closeOnScroll.tsx +++ b/docs-site/src/examples/ts/closeOnScroll.tsx @@ -5,7 +5,7 @@ const CloseOnScroll = () => { setSelectedDate(date)} + onChange={setSelectedDate} /> ); }; diff --git a/docs-site/src/examples/ts/closeOnScrollCallback.tsx b/docs-site/src/examples/ts/closeOnScrollCallback.tsx index 62909e181d..f70f027aa8 100644 --- a/docs-site/src/examples/ts/closeOnScrollCallback.tsx +++ b/docs-site/src/examples/ts/closeOnScrollCallback.tsx @@ -5,7 +5,7 @@ const CloseOnScrollCallback = () => { e.target === document} selected={selectedDate} - onChange={(date: Date | null) => setSelectedDate(date)} + onChange={setSelectedDate} /> ); }; diff --git a/docs-site/src/examples/ts/configureFloatingUI.tsx b/docs-site/src/examples/ts/configureFloatingUI.tsx index 9f39737802..7539c5ccac 100644 --- a/docs-site/src/examples/ts/configureFloatingUI.tsx +++ b/docs-site/src/examples/ts/configureFloatingUI.tsx @@ -4,7 +4,7 @@ const ConfigureFloatingUI = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} popperClassName="some-custom-class" popperPlacement="top-end" popperModifiers={[ diff --git a/docs-site/src/examples/ts/customCalendarClassName.tsx b/docs-site/src/examples/ts/customCalendarClassName.tsx index aafa6747fb..ae99a0b439 100644 --- a/docs-site/src/examples/ts/customCalendarClassName.tsx +++ b/docs-site/src/examples/ts/customCalendarClassName.tsx @@ -4,7 +4,7 @@ const CustomCalendarClassName = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} calendarClassName="rasta-stripes" /> ); diff --git a/docs-site/src/examples/ts/customClassName.tsx b/docs-site/src/examples/ts/customClassName.tsx index ba29ad8ffe..03309ab808 100644 --- a/docs-site/src/examples/ts/customClassName.tsx +++ b/docs-site/src/examples/ts/customClassName.tsx @@ -4,7 +4,7 @@ const CustomClassName = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} className="red-border" /> ); diff --git a/docs-site/src/examples/ts/customDateFormat.tsx b/docs-site/src/examples/ts/customDateFormat.tsx index 3dc69655e9..1493f19689 100644 --- a/docs-site/src/examples/ts/customDateFormat.tsx +++ b/docs-site/src/examples/ts/customDateFormat.tsx @@ -5,7 +5,7 @@ const CustomDateFormat = () => { setSelectedDate(date)} + onChange={setSelectedDate} /> ); }; diff --git a/docs-site/src/examples/ts/customDayClassName.tsx b/docs-site/src/examples/ts/customDayClassName.tsx index cd0284f588..edef3a43bd 100644 --- a/docs-site/src/examples/ts/customDayClassName.tsx +++ b/docs-site/src/examples/ts/customDayClassName.tsx @@ -4,7 +4,7 @@ const CustomDayClassName = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} dayClassName={(date: Date) => DateFNS.getDate(date) < Math.random() * 31 ? "random" : undefined } diff --git a/docs-site/src/examples/ts/customInput.tsx b/docs-site/src/examples/ts/customInput.tsx index 9e5dc48669..5332628794 100644 --- a/docs-site/src/examples/ts/customInput.tsx +++ b/docs-site/src/examples/ts/customInput.tsx @@ -19,7 +19,7 @@ const CustomInput = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} customInput={} /> ); diff --git a/docs-site/src/examples/ts/customTimeClassName.tsx b/docs-site/src/examples/ts/customTimeClassName.tsx index 05b79c8403..234e5174b4 100644 --- a/docs-site/src/examples/ts/customTimeClassName.tsx +++ b/docs-site/src/examples/ts/customTimeClassName.tsx @@ -11,7 +11,7 @@ const CustomTimeClassName = () => { setSelectedDateTime(date)} + onChange={setSelectedDateTime} timeClassName={handleColor} /> ); diff --git a/docs-site/src/examples/ts/customTimeInput.tsx b/docs-site/src/examples/ts/customTimeInput.tsx index cb997b7b59..2c39db267d 100644 --- a/docs-site/src/examples/ts/customTimeInput.tsx +++ b/docs-site/src/examples/ts/customTimeInput.tsx @@ -26,7 +26,7 @@ const CustomTimeInput = () => { return ( setSelectedDateTime(date)} + onChange={setSelectedDateTime} showTimeInput customTimeInput={} /> diff --git a/docs-site/src/examples/ts/dateRange.tsx b/docs-site/src/examples/ts/dateRange.tsx index 3d0ad3dd32..b91a820325 100644 --- a/docs-site/src/examples/ts/dateRange.tsx +++ b/docs-site/src/examples/ts/dateRange.tsx @@ -8,14 +8,14 @@ const DateRange = () => { <> setStartDate(date)} + onChange={setStartDate} selectsStart startDate={selectedDate} endDate={endDate} /> setEndDate(date)} + onChange={setEndDate} selectsEnd startDate={selectedDate} endDate={endDate} diff --git a/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx b/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx index 766f15c70d..647d2e92a4 100644 --- a/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx +++ b/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx @@ -9,9 +9,7 @@ const DateRangeInputWithClearButton = () => { { - setDateRange(update); - }} + onChange={setDateRange} selectsRange isClearable /> diff --git a/docs-site/src/examples/ts/dateRangeWithPortal.tsx b/docs-site/src/examples/ts/dateRangeWithPortal.tsx index 54da56e9de..37b1650966 100644 --- a/docs-site/src/examples/ts/dateRangeWithPortal.tsx +++ b/docs-site/src/examples/ts/dateRangeWithPortal.tsx @@ -9,9 +9,7 @@ const DateRangeWithPortal = () => { { - setDateRange(update); - }} + onChange={setDateRange} selectsRange withPortal /> diff --git a/docs-site/src/examples/ts/default.tsx b/docs-site/src/examples/ts/default.tsx index 00f348e908..7acdd3d5d1 100644 --- a/docs-site/src/examples/ts/default.tsx +++ b/docs-site/src/examples/ts/default.tsx @@ -1,12 +1,11 @@ const Default = () => { const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - /> - ); + const handleChange = (date: Date | null) => { + setSelectedDate(date); + }; + + return ; }; render(Default); diff --git a/docs-site/src/examples/ts/disabled.tsx b/docs-site/src/examples/ts/disabled.tsx index 09ee2bf59c..d3db54bac9 100644 --- a/docs-site/src/examples/ts/disabled.tsx +++ b/docs-site/src/examples/ts/disabled.tsx @@ -4,7 +4,7 @@ const Disabled = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} disabled placeholderText="This is disabled" /> diff --git a/docs-site/src/examples/ts/disabledInline.tsx b/docs-site/src/examples/ts/disabledInline.tsx index 97f92a907f..d1e7847d32 100644 --- a/docs-site/src/examples/ts/disabledInline.tsx +++ b/docs-site/src/examples/ts/disabledInline.tsx @@ -4,7 +4,7 @@ const DisabledInline = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} disabled inline /> diff --git a/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx b/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx index 4b87269b0e..130b14a2d0 100644 --- a/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx +++ b/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx @@ -4,7 +4,7 @@ const DisabledKeyboardNavigation = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} disabledKeyboardNavigation placeholderText="This has disabled keyboard navigation" /> diff --git a/docs-site/src/examples/ts/dontCloseOnSelect.tsx b/docs-site/src/examples/ts/dontCloseOnSelect.tsx index aa276b3071..894c4a4977 100644 --- a/docs-site/src/examples/ts/dontCloseOnSelect.tsx +++ b/docs-site/src/examples/ts/dontCloseOnSelect.tsx @@ -4,7 +4,7 @@ const DontCloseOnSelect = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} shouldCloseOnSelect={false} /> ); diff --git a/docs-site/src/examples/ts/excludeDateIntervals.tsx b/docs-site/src/examples/ts/excludeDateIntervals.tsx index ab9d61082a..2305884ba2 100644 --- a/docs-site/src/examples/ts/excludeDateIntervals.tsx +++ b/docs-site/src/examples/ts/excludeDateIntervals.tsx @@ -16,7 +16,7 @@ const ExcludeDateIntervals = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} excludeDateIntervals={excludeDateIntervals} placeholderText="Select a date other than the interval from 5 days ago to 5 days in the future" /> diff --git a/docs-site/src/examples/ts/excludeDates.tsx b/docs-site/src/examples/ts/excludeDates.tsx index 088080f213..81f5bc410c 100644 --- a/docs-site/src/examples/ts/excludeDates.tsx +++ b/docs-site/src/examples/ts/excludeDates.tsx @@ -16,7 +16,7 @@ const ExcludeDates = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} excludeDates={excludeDates} placeholderText="Select a date other than today or yesterday" /> diff --git a/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx b/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx index 19522401b2..99b82cb503 100644 --- a/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx +++ b/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx @@ -18,7 +18,7 @@ const ExcludeDatesMonthPicker = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} dateFormat="MM/yyyy" excludeDates={excludeDates} showMonthYearPicker diff --git a/docs-site/src/examples/ts/excludeDatesWithMessage.tsx b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx index 43f4c862bb..be8a89dbfa 100644 --- a/docs-site/src/examples/ts/excludeDatesWithMessage.tsx +++ b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx @@ -16,7 +16,7 @@ const ExcludeDatesWithMessage = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} excludeDates={excludeDates} placeholderText="Select a date other than today or yesterday" /> diff --git a/docs-site/src/examples/ts/excludeTimePeriod.tsx b/docs-site/src/examples/ts/excludeTimePeriod.tsx index e00940aeb2..86f9f63abc 100644 --- a/docs-site/src/examples/ts/excludeTimePeriod.tsx +++ b/docs-site/src/examples/ts/excludeTimePeriod.tsx @@ -8,7 +8,7 @@ const ExcludeTimePeriod = () => { return ( setSelectedDateTime(date)} + onChange={setSelectedDateTime} showTimeSelect minTime={setHours(setMinutes(new Date(), 0), 17)} maxTime={setHours(setMinutes(new Date(), 30), 20)} diff --git a/docs-site/src/examples/ts/excludeTimes.tsx b/docs-site/src/examples/ts/excludeTimes.tsx index 61bbbd75dd..ff5d65adca 100644 --- a/docs-site/src/examples/ts/excludeTimes.tsx +++ b/docs-site/src/examples/ts/excludeTimes.tsx @@ -16,7 +16,7 @@ const ExcludeTimes = () => { return ( setSelectedDateTime(date)} + onChange={setSelectedDateTime} showTimeSelect excludeTimes={excludeTimes} dateFormat="MMMM d, yyyy h:mm aa" diff --git a/docs-site/src/examples/ts/excludeWeeks.tsx b/docs-site/src/examples/ts/excludeWeeks.tsx index dc7c1f5074..ceeb41173c 100644 --- a/docs-site/src/examples/ts/excludeWeeks.tsx +++ b/docs-site/src/examples/ts/excludeWeeks.tsx @@ -16,7 +16,7 @@ const ExcludeWeeks = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} dateFormat="I/R" locale="en-GB" excludeDateIntervals={excludeWeeks} diff --git a/docs-site/src/examples/ts/externalForm.tsx b/docs-site/src/examples/ts/externalForm.tsx index 9fe9519131..06f5e28469 100644 --- a/docs-site/src/examples/ts/externalForm.tsx +++ b/docs-site/src/examples/ts/externalForm.tsx @@ -5,7 +5,7 @@ const ExternalForm = () => { <> setSelectedDate(date)} + onChange={setSelectedDate} required form="external-form" /> diff --git a/docs-site/src/examples/ts/filterDates.tsx b/docs-site/src/examples/ts/filterDates.tsx index 6dc1e386ec..618f1668c5 100644 --- a/docs-site/src/examples/ts/filterDates.tsx +++ b/docs-site/src/examples/ts/filterDates.tsx @@ -11,7 +11,7 @@ const FilterDates = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} filterDate={isWeekday} placeholderText="Select a weekday" /> diff --git a/docs-site/src/examples/ts/filterTimes.tsx b/docs-site/src/examples/ts/filterTimes.tsx index d13ab92c6f..44e7cfe173 100644 --- a/docs-site/src/examples/ts/filterTimes.tsx +++ b/docs-site/src/examples/ts/filterTimes.tsx @@ -16,7 +16,7 @@ const FilterTimes = () => { return ( setSelectedDateTime(date)} + onChange={setSelectedDateTime} showTimeSelect filterTime={filterPassedTime} dateFormat="MMMM d, yyyy h:mm aa" diff --git a/docs-site/src/examples/ts/fixedCalendar.tsx b/docs-site/src/examples/ts/fixedCalendar.tsx index 40e774d5a4..efcc202851 100644 --- a/docs-site/src/examples/ts/fixedCalendar.tsx +++ b/docs-site/src/examples/ts/fixedCalendar.tsx @@ -4,7 +4,7 @@ const FixedCalendar = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} fixedHeight /> ); diff --git a/docs-site/src/examples/ts/hideTimeCaption.tsx b/docs-site/src/examples/ts/hideTimeCaption.tsx index 63b06ebbd2..cb47e1fab5 100644 --- a/docs-site/src/examples/ts/hideTimeCaption.tsx +++ b/docs-site/src/examples/ts/hideTimeCaption.tsx @@ -6,7 +6,7 @@ const HideTimeCaption = () => { return ( setSelectedDateTime(date)} + onChange={setSelectedDateTime} showTimeSelect showTimeSelectOnly timeIntervals={15} diff --git a/docs-site/src/examples/ts/highlightDates.tsx b/docs-site/src/examples/ts/highlightDates.tsx index 4fd11c82e1..f48d705e80 100644 --- a/docs-site/src/examples/ts/highlightDates.tsx +++ b/docs-site/src/examples/ts/highlightDates.tsx @@ -15,7 +15,7 @@ const HighlightDates = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} highlightDates={highlightDates} placeholderText="This highlights a week ago and a week from today" /> diff --git a/docs-site/src/examples/ts/highlightDatesRanges.tsx b/docs-site/src/examples/ts/highlightDatesRanges.tsx index f9165bdea7..cd8f14a52b 100644 --- a/docs-site/src/examples/ts/highlightDatesRanges.tsx +++ b/docs-site/src/examples/ts/highlightDatesRanges.tsx @@ -30,7 +30,7 @@ const HighlightDatesRanges = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} highlightDates={highlightWithRanges} placeholderText="This highlight two ranges with custom classes" /> diff --git a/docs-site/src/examples/ts/holidayDates.tsx b/docs-site/src/examples/ts/holidayDates.tsx index 5383da21de..e8a091f68e 100644 --- a/docs-site/src/examples/ts/holidayDates.tsx +++ b/docs-site/src/examples/ts/holidayDates.tsx @@ -17,7 +17,7 @@ const HolidayDates = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} holidays={holidays} placeholderText="This display holidays" /> diff --git a/docs-site/src/examples/ts/includeDateIntervals.tsx b/docs-site/src/examples/ts/includeDateIntervals.tsx index ffd6772ab7..bb575978f3 100644 --- a/docs-site/src/examples/ts/includeDateIntervals.tsx +++ b/docs-site/src/examples/ts/includeDateIntervals.tsx @@ -14,7 +14,7 @@ const IncludeDateIntervals = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} includeDateIntervals={includeDateIntervals} placeholderText="This only includes dates from 5 days ago to 5 days in the future" /> diff --git a/docs-site/src/examples/ts/includeDates.tsx b/docs-site/src/examples/ts/includeDates.tsx index 0f4ae1eba7..17fc9d8c04 100644 --- a/docs-site/src/examples/ts/includeDates.tsx +++ b/docs-site/src/examples/ts/includeDates.tsx @@ -9,7 +9,7 @@ const IncludeDates = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} includeDates={includeDates} placeholderText="This only includes today and tomorrow" /> diff --git a/docs-site/src/examples/ts/includeDatesMonthPicker.tsx b/docs-site/src/examples/ts/includeDatesMonthPicker.tsx index c6f1cc3a88..8dc3780dc6 100644 --- a/docs-site/src/examples/ts/includeDatesMonthPicker.tsx +++ b/docs-site/src/examples/ts/includeDatesMonthPicker.tsx @@ -10,7 +10,7 @@ const IncludeDatesMonthPicker = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} dateFormat="MM/yyyy" includeDates={includeDates} showMonthYearPicker diff --git a/docs-site/src/examples/ts/includeTimes.tsx b/docs-site/src/examples/ts/includeTimes.tsx index 7ca1e15074..135c5757b6 100644 --- a/docs-site/src/examples/ts/includeTimes.tsx +++ b/docs-site/src/examples/ts/includeTimes.tsx @@ -15,7 +15,7 @@ const IncludeTimes = () => { return ( setSelectedDateTime(date)} + onChange={setSelectedDateTime} showTimeSelect includeTimes={includeTimes} dateFormat="MMMM d, yyyy h:mm aa" diff --git a/docs-site/src/examples/ts/injectTimes.tsx b/docs-site/src/examples/ts/injectTimes.tsx index bced85345c..6fbf447534 100644 --- a/docs-site/src/examples/ts/injectTimes.tsx +++ b/docs-site/src/examples/ts/injectTimes.tsx @@ -14,7 +14,7 @@ const InjectTimes = () => { return ( setSelectedDateTime(date)} + onChange={setSelectedDateTime} showTimeSelect timeFormat="HH:mm:ss" injectTimes={injectTimes} diff --git a/docs-site/src/examples/ts/inline.tsx b/docs-site/src/examples/ts/inline.tsx index 79535eaca1..22ca760f4b 100644 --- a/docs-site/src/examples/ts/inline.tsx +++ b/docs-site/src/examples/ts/inline.tsx @@ -2,11 +2,7 @@ const Inline = () => { const [selectedDate, setSelectedDate] = useState(new Date()); return ( - setSelectedDate(date)} - inline - /> + ); }; diff --git a/docs-site/src/examples/ts/locale.tsx b/docs-site/src/examples/ts/locale.tsx index 890b9c48b2..555ac0a457 100644 --- a/docs-site/src/examples/ts/locale.tsx +++ b/docs-site/src/examples/ts/locale.tsx @@ -4,7 +4,7 @@ const Locale = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} locale="en-GB" placeholderText="Weeks start on Monday" /> diff --git a/docs-site/src/examples/ts/localeWithTime.tsx b/docs-site/src/examples/ts/localeWithTime.tsx index 3532bfc6a4..7f40e86dcc 100644 --- a/docs-site/src/examples/ts/localeWithTime.tsx +++ b/docs-site/src/examples/ts/localeWithTime.tsx @@ -6,7 +6,7 @@ const LocaleWithTime = () => { return ( setSelectedDateTime(date)} + onChange={setSelectedDateTime} locale="pt-BR" showTimeSelect timeFormat="p" diff --git a/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx b/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx index 9bd3e55cb1..adac169ae4 100644 --- a/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx +++ b/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx @@ -4,7 +4,7 @@ const LocaleWithoutGlobalVariable = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} locale={fi} /> ); diff --git a/docs-site/src/examples/ts/maxDate.tsx b/docs-site/src/examples/ts/maxDate.tsx index 9385a2f0a7..b037e649b6 100644 --- a/docs-site/src/examples/ts/maxDate.tsx +++ b/docs-site/src/examples/ts/maxDate.tsx @@ -4,7 +4,7 @@ const MaxDate = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} maxDate={DateFNS.addDays(new Date(), 5)} placeholderText="Select a date before 5 days in the future" /> diff --git a/docs-site/src/examples/ts/minDate.tsx b/docs-site/src/examples/ts/minDate.tsx index 99465c4d70..46b71a87b9 100644 --- a/docs-site/src/examples/ts/minDate.tsx +++ b/docs-site/src/examples/ts/minDate.tsx @@ -4,7 +4,7 @@ const MinDate = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} minDate={DateFNS.subDays(new Date(), 5)} placeholderText="Select a date after 5 days ago" /> diff --git a/docs-site/src/examples/ts/monthDropdown.tsx b/docs-site/src/examples/ts/monthDropdown.tsx index 5d0e9c8a8e..31fafc1c3c 100644 --- a/docs-site/src/examples/ts/monthDropdown.tsx +++ b/docs-site/src/examples/ts/monthDropdown.tsx @@ -4,7 +4,7 @@ const MonthDropdown = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} showMonthDropdown /> ); diff --git a/docs-site/src/examples/ts/monthDropdownShort.tsx b/docs-site/src/examples/ts/monthDropdownShort.tsx index 9a381ca542..263bf15efa 100644 --- a/docs-site/src/examples/ts/monthDropdownShort.tsx +++ b/docs-site/src/examples/ts/monthDropdownShort.tsx @@ -4,7 +4,7 @@ const MonthDropdownShort = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} showMonthDropdown useShortMonthInDropdown /> diff --git a/docs-site/src/examples/ts/monthPicker.tsx b/docs-site/src/examples/ts/monthPicker.tsx index 95604948ba..238c5ebbe7 100644 --- a/docs-site/src/examples/ts/monthPicker.tsx +++ b/docs-site/src/examples/ts/monthPicker.tsx @@ -4,7 +4,7 @@ const MonthPicker = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} dateFormat="MM/yyyy" showMonthYearPicker /> diff --git a/docs-site/src/examples/ts/monthPickerFourColumns.tsx b/docs-site/src/examples/ts/monthPickerFourColumns.tsx index 6a6ea8cb61..1200614c55 100644 --- a/docs-site/src/examples/ts/monthPickerFourColumns.tsx +++ b/docs-site/src/examples/ts/monthPickerFourColumns.tsx @@ -4,7 +4,7 @@ const MonthPickerFourColumns = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} dateFormat="MM/yyyy" showMonthYearPicker showFullMonthYearPicker diff --git a/docs-site/src/examples/ts/monthPickerFullName.tsx b/docs-site/src/examples/ts/monthPickerFullName.tsx index 5a8c4591e4..07411b6ac9 100644 --- a/docs-site/src/examples/ts/monthPickerFullName.tsx +++ b/docs-site/src/examples/ts/monthPickerFullName.tsx @@ -4,7 +4,7 @@ const MonthPickerFullName = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} dateFormat="MM/yyyy" showMonthYearPicker showFullMonthYearPicker diff --git a/docs-site/src/examples/ts/monthPickerTwoColumns.tsx b/docs-site/src/examples/ts/monthPickerTwoColumns.tsx index 1876b3cc39..b49b1de77f 100644 --- a/docs-site/src/examples/ts/monthPickerTwoColumns.tsx +++ b/docs-site/src/examples/ts/monthPickerTwoColumns.tsx @@ -4,7 +4,7 @@ const MonthPickerTwoColumns = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} dateFormat="MM/yyyy" showMonthYearPicker showFullMonthYearPicker diff --git a/docs-site/src/examples/ts/monthYearDropdown.tsx b/docs-site/src/examples/ts/monthYearDropdown.tsx index 65c8495cb7..6b108743c4 100644 --- a/docs-site/src/examples/ts/monthYearDropdown.tsx +++ b/docs-site/src/examples/ts/monthYearDropdown.tsx @@ -6,7 +6,7 @@ const MonthYearDropdown = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} dateFormatCalendar={"MMM yyyy"} minDate={subMonths(new Date(), 6)} maxDate={addMonths(new Date(), 6)} diff --git a/docs-site/src/examples/ts/multiMonth.tsx b/docs-site/src/examples/ts/multiMonth.tsx index 2560987d13..9fd27fa650 100644 --- a/docs-site/src/examples/ts/multiMonth.tsx +++ b/docs-site/src/examples/ts/multiMonth.tsx @@ -4,7 +4,7 @@ const MultiMonth = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} monthsShown={2} /> ); diff --git a/docs-site/src/examples/ts/multiMonthDropdown.tsx b/docs-site/src/examples/ts/multiMonthDropdown.tsx index 2f62917624..5d21a35837 100644 --- a/docs-site/src/examples/ts/multiMonthDropdown.tsx +++ b/docs-site/src/examples/ts/multiMonthDropdown.tsx @@ -4,7 +4,7 @@ const MultiMonthDropdown = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} monthsShown={2} showYearDropdown /> diff --git a/docs-site/src/examples/ts/multiMonthInline.tsx b/docs-site/src/examples/ts/multiMonthInline.tsx index 4c2fc98e23..c7306061e6 100644 --- a/docs-site/src/examples/ts/multiMonthInline.tsx +++ b/docs-site/src/examples/ts/multiMonthInline.tsx @@ -4,7 +4,7 @@ const MultiMonthInline = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} monthsShown={2} inline /> diff --git a/docs-site/src/examples/ts/multiMonthPrevious.tsx b/docs-site/src/examples/ts/multiMonthPrevious.tsx index 3b826db628..3350fbc717 100644 --- a/docs-site/src/examples/ts/multiMonthPrevious.tsx +++ b/docs-site/src/examples/ts/multiMonthPrevious.tsx @@ -5,7 +5,7 @@ const MultiMonthPrevious = () => { setSelectedDate(date)} + onChange={setSelectedDate} monthsShown={2} /> ); diff --git a/docs-site/src/examples/ts/noAnchorArrow.tsx b/docs-site/src/examples/ts/noAnchorArrow.tsx index b33b8310b1..186ed37ba2 100644 --- a/docs-site/src/examples/ts/noAnchorArrow.tsx +++ b/docs-site/src/examples/ts/noAnchorArrow.tsx @@ -5,7 +5,7 @@ const NoAnchorArrow = () => { setSelectedDate(date)} + onChange={setSelectedDate} /> ); }; diff --git a/docs-site/src/examples/ts/onBlurCallbacks.tsx b/docs-site/src/examples/ts/onBlurCallbacks.tsx index 35b848a0a0..c9ba98729e 100644 --- a/docs-site/src/examples/ts/onBlurCallbacks.tsx +++ b/docs-site/src/examples/ts/onBlurCallbacks.tsx @@ -18,7 +18,7 @@ const OnBlurCallbacks = () => { setSelectedDate(date)} + onChange={setSelectedDate} onBlur={handleOnBlur} placeholderText="View blur callbacks in console" /> diff --git a/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx b/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx index 034a01bbc3..4c11340bac 100644 --- a/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx +++ b/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx @@ -7,7 +7,7 @@ const OnCalendarOpenStateCallbacks = () => { return ( setDate(date)} + onChange={setDate} onCalendarClose={handleCalendarClose} onCalendarOpen={handleCalendarOpen} /> diff --git a/docs-site/src/examples/ts/openToDate.tsx b/docs-site/src/examples/ts/openToDate.tsx index a03f7a0b0d..b6f9a0342e 100644 --- a/docs-site/src/examples/ts/openToDate.tsx +++ b/docs-site/src/examples/ts/openToDate.tsx @@ -4,7 +4,7 @@ const OpenToDate = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} openToDate={new Date("1993/09/28")} /> ); diff --git a/docs-site/src/examples/ts/portal.tsx b/docs-site/src/examples/ts/portal.tsx index 38de9fa23e..c5365c445a 100644 --- a/docs-site/src/examples/ts/portal.tsx +++ b/docs-site/src/examples/ts/portal.tsx @@ -2,11 +2,7 @@ const Portal = () => { const [selectedDate, setSelectedDate] = useState(new Date()); return ( - setSelectedDate(date)} - withPortal - /> + ); }; diff --git a/docs-site/src/examples/ts/portalById.tsx b/docs-site/src/examples/ts/portalById.tsx index 0a38653a06..5cafd3fa5e 100644 --- a/docs-site/src/examples/ts/portalById.tsx +++ b/docs-site/src/examples/ts/portalById.tsx @@ -4,7 +4,7 @@ const PortalById = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} portalId="root-portal" /> ); diff --git a/docs-site/src/examples/ts/quarterPicker.tsx b/docs-site/src/examples/ts/quarterPicker.tsx index 6b2a94a551..fe0f0b95c9 100644 --- a/docs-site/src/examples/ts/quarterPicker.tsx +++ b/docs-site/src/examples/ts/quarterPicker.tsx @@ -4,7 +4,7 @@ const QuarterPicker = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} dateFormat="yyyy, QQQ" showQuarterYearPicker /> diff --git a/docs-site/src/examples/ts/rangeMonthPicker.tsx b/docs-site/src/examples/ts/rangeMonthPicker.tsx index dbdefd5f46..15a47a1879 100644 --- a/docs-site/src/examples/ts/rangeMonthPicker.tsx +++ b/docs-site/src/examples/ts/rangeMonthPicker.tsx @@ -8,7 +8,7 @@ const RangeMonthPicker = () => { <> setStartDate(date)} + onChange={setStartDate} selectsStart startDate={startDate} endDate={endDate} @@ -17,7 +17,7 @@ const RangeMonthPicker = () => { /> setEndDate(date)} + onChange={setEndDate} selectsEnd startDate={startDate} endDate={endDate} diff --git a/docs-site/src/examples/ts/rangeQuarterPicker.tsx b/docs-site/src/examples/ts/rangeQuarterPicker.tsx index 91b169784b..14f2ea4310 100644 --- a/docs-site/src/examples/ts/rangeQuarterPicker.tsx +++ b/docs-site/src/examples/ts/rangeQuarterPicker.tsx @@ -8,7 +8,7 @@ const RangeQuarterPicker = () => { <> setStartDate(date)} + onChange={setStartDate} selectsStart startDate={startDate} endDate={endDate} @@ -17,7 +17,7 @@ const RangeQuarterPicker = () => { /> setEndDate(date)} + onChange={setEndDate} selectsEnd startDate={startDate} endDate={endDate} diff --git a/docs-site/src/examples/ts/rangeYearPicker.tsx b/docs-site/src/examples/ts/rangeYearPicker.tsx index fd52a4a2df..fa96fc60e4 100644 --- a/docs-site/src/examples/ts/rangeYearPicker.tsx +++ b/docs-site/src/examples/ts/rangeYearPicker.tsx @@ -8,7 +8,7 @@ const RangeYearPicker = () => { <> setStartDate(date)} + onChange={setStartDate} selectsStart startDate={startDate} endDate={endDate} @@ -17,7 +17,7 @@ const RangeYearPicker = () => { /> setEndDate(date)} + onChange={setEndDate} selectsEnd startDate={startDate} endDate={endDate} diff --git a/docs-site/src/examples/ts/rawChange.tsx b/docs-site/src/examples/ts/rawChange.tsx index 014d000a02..bb3bb3ee2e 100644 --- a/docs-site/src/examples/ts/rawChange.tsx +++ b/docs-site/src/examples/ts/rawChange.tsx @@ -24,7 +24,7 @@ const RawChange = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} placeholderText='Enter "tomorrow"' onChangeRaw={( event: diff --git a/docs-site/src/examples/ts/readOnly.tsx b/docs-site/src/examples/ts/readOnly.tsx index 13128ce4c1..8e15248adc 100644 --- a/docs-site/src/examples/ts/readOnly.tsx +++ b/docs-site/src/examples/ts/readOnly.tsx @@ -4,7 +4,7 @@ const ReadOnly = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} placeholderText="This is readOnly" readOnly /> diff --git a/docs-site/src/examples/ts/renderCustomDay.tsx b/docs-site/src/examples/ts/renderCustomDay.tsx index 8e79cfca24..b78949dc57 100644 --- a/docs-site/src/examples/ts/renderCustomDay.tsx +++ b/docs-site/src/examples/ts/renderCustomDay.tsx @@ -10,7 +10,7 @@ const RenderCustomDay = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} renderDayContents={renderDayContents} /> ); diff --git a/docs-site/src/examples/ts/renderCustomHeader.tsx b/docs-site/src/examples/ts/renderCustomHeader.tsx index 42f21576d5..dbc765cbe6 100644 --- a/docs-site/src/examples/ts/renderCustomHeader.tsx +++ b/docs-site/src/examples/ts/renderCustomHeader.tsx @@ -72,7 +72,7 @@ const RenderCustomHeader = () => { setSelectedDate(date)} + onChange={setSelectedDate} /> ); }; diff --git a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx index ec94cc87c4..9be43cb5d7 100644 --- a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx +++ b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx @@ -57,7 +57,7 @@ const RenderCustomHeaderTwoMonths = () => { )} selected={selectedDate} - onChange={(date: Date | null) => setSelectedDate(date)} + onChange={setSelectedDate} monthsShown={monthsShown} /> ); diff --git a/docs-site/src/examples/ts/showTime.tsx b/docs-site/src/examples/ts/showTime.tsx index 349b5a5396..4168b6ee1c 100644 --- a/docs-site/src/examples/ts/showTime.tsx +++ b/docs-site/src/examples/ts/showTime.tsx @@ -6,7 +6,7 @@ const ShowTime = () => { return ( setSelectedDateTime(date)} + onChange={setSelectedDateTime} showTimeSelect timeFormat="HH:mm" timeIntervals={15} diff --git a/docs-site/src/examples/ts/showTimeOnly.tsx b/docs-site/src/examples/ts/showTimeOnly.tsx index 8ee9698865..2dea696074 100644 --- a/docs-site/src/examples/ts/showTimeOnly.tsx +++ b/docs-site/src/examples/ts/showTimeOnly.tsx @@ -6,7 +6,7 @@ const ShowTimeOnly = () => { return ( setSelectedDateTime(date)} + onChange={setSelectedDateTime} showTimeSelect showTimeSelectOnly timeIntervals={15} diff --git a/docs-site/src/examples/ts/specificDateRange.tsx b/docs-site/src/examples/ts/specificDateRange.tsx index 257814ae87..8363cf3dd8 100644 --- a/docs-site/src/examples/ts/specificDateRange.tsx +++ b/docs-site/src/examples/ts/specificDateRange.tsx @@ -4,7 +4,7 @@ const SpecificDateRange = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} minDate={new Date()} maxDate={DateFNS.addDays(new Date(), 5)} placeholderText="Select a date between today and 5 days in the future" diff --git a/docs-site/src/examples/ts/strictParsing.tsx b/docs-site/src/examples/ts/strictParsing.tsx index 6abef57bef..a87c86a543 100644 --- a/docs-site/src/examples/ts/strictParsing.tsx +++ b/docs-site/src/examples/ts/strictParsing.tsx @@ -4,7 +4,7 @@ const StrictParsing = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} strictParsing /> ); diff --git a/docs-site/src/examples/ts/timeInput.tsx b/docs-site/src/examples/ts/timeInput.tsx index 526d8c13da..bc0108185a 100644 --- a/docs-site/src/examples/ts/timeInput.tsx +++ b/docs-site/src/examples/ts/timeInput.tsx @@ -6,7 +6,7 @@ const TimeInput = () => { return ( setSelectedDateTime(date)} + onChange={setSelectedDateTime} timeInputLabel="Time:" dateFormat="MM/dd/yyyy h:mm aa" showTimeInput diff --git a/docs-site/src/examples/ts/today.tsx b/docs-site/src/examples/ts/today.tsx index 5c3a7c3c49..03d0a5fcfa 100644 --- a/docs-site/src/examples/ts/today.tsx +++ b/docs-site/src/examples/ts/today.tsx @@ -5,7 +5,7 @@ const Today = () => { setSelectedDate(date)} + onChange={setSelectedDate} /> ); }; diff --git a/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx b/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx index 8ecb580ce1..a98b95436c 100644 --- a/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx +++ b/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx @@ -6,7 +6,7 @@ const ToggleCalendarOnIconClick = () => { showIcon toggleCalendarOnIconClick selected={selectedDate} - onChange={(date: Date | null) => setSelectedDate(date)} + onChange={setSelectedDate} /> ); }; diff --git a/docs-site/src/examples/ts/weekNumbers.tsx b/docs-site/src/examples/ts/weekNumbers.tsx index 0cb5476372..496e0503f1 100644 --- a/docs-site/src/examples/ts/weekNumbers.tsx +++ b/docs-site/src/examples/ts/weekNumbers.tsx @@ -4,7 +4,7 @@ const WeekNumbers = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} locale="en-GB" showWeekNumbers /> diff --git a/docs-site/src/examples/ts/weekPicker.tsx b/docs-site/src/examples/ts/weekPicker.tsx index f1af02ff8a..63df946c09 100644 --- a/docs-site/src/examples/ts/weekPicker.tsx +++ b/docs-site/src/examples/ts/weekPicker.tsx @@ -6,7 +6,7 @@ const WeekPicker = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} dateFormat="I/R" locale="en-GB" showWeekNumbers diff --git a/docs-site/src/examples/ts/withPortalById.tsx b/docs-site/src/examples/ts/withPortalById.tsx index bae86588d5..575aee05b3 100644 --- a/docs-site/src/examples/ts/withPortalById.tsx +++ b/docs-site/src/examples/ts/withPortalById.tsx @@ -4,7 +4,7 @@ const WithPortalById = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} withPortal portalId="root-portal" /> diff --git a/docs-site/src/examples/ts/yearDropdown.tsx b/docs-site/src/examples/ts/yearDropdown.tsx index 4989459a64..502ec32f1d 100644 --- a/docs-site/src/examples/ts/yearDropdown.tsx +++ b/docs-site/src/examples/ts/yearDropdown.tsx @@ -4,7 +4,7 @@ const YearDropdown = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} showYearDropdown dateFormatCalendar="MMMM" yearDropdownItemNumber={15} diff --git a/docs-site/src/examples/ts/yearItemNumber.tsx b/docs-site/src/examples/ts/yearItemNumber.tsx index 3692a69928..deb7992f0d 100644 --- a/docs-site/src/examples/ts/yearItemNumber.tsx +++ b/docs-site/src/examples/ts/yearItemNumber.tsx @@ -4,7 +4,7 @@ const YearItemNumber = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} showYearPicker dateFormat="yyyy" yearItemNumber={9} diff --git a/docs-site/src/examples/ts/yearPicker.tsx b/docs-site/src/examples/ts/yearPicker.tsx index fc8d3cf613..c5fd6a7d9c 100644 --- a/docs-site/src/examples/ts/yearPicker.tsx +++ b/docs-site/src/examples/ts/yearPicker.tsx @@ -4,7 +4,7 @@ const YearPicker = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} showYearPicker dateFormat="yyyy" /> diff --git a/docs-site/src/examples/ts/yearSelectDropdown.tsx b/docs-site/src/examples/ts/yearSelectDropdown.tsx index ddc73013ff..ed1673cf6d 100644 --- a/docs-site/src/examples/ts/yearSelectDropdown.tsx +++ b/docs-site/src/examples/ts/yearSelectDropdown.tsx @@ -4,7 +4,7 @@ const YearSelectDropdown = () => { return ( setSelectedDate(date)} + onChange={setSelectedDate} peekNextMonth showMonthDropdown showYearDropdown From 4a318f25ea5238e6752d5220acba9c0b1d6f7ffc Mon Sep 17 00:00:00 2001 From: balajis-qb Date: Tue, 25 Nov 2025 14:00:03 +0530 Subject: [PATCH 2/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20renderCusto?= =?UTF-8?q?mHeader=20in=20DatePicker=20example=20for=20improved=20readabil?= =?UTF-8?q?ity?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Extracted the custom header rendering logic into a separate function, renderHeader, to enhance code clarity and maintainability in the RenderCustomHeaderTwoMonths example. This change simplifies the DatePicker component's renderCustomHeader prop. --- .../ts/renderCustomHeaderTwoMonths.tsx | 104 +++++++++--------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx index 9be43cb5d7..15a48cd15a 100644 --- a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx +++ b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx @@ -2,60 +2,60 @@ const RenderCustomHeaderTwoMonths = () => { const [selectedDate, setSelectedDate] = useState(new Date()); const monthsShown = useMemo(() => 2, []); + const renderHeader = ({ + monthDate, + customHeaderCount, + decreaseMonth, + increaseMonth, + }: ReactDatePickerCustomHeaderProps) => ( +
+ + + {monthDate.toLocaleString("en-US", { + month: "long", + year: "numeric", + })} + + +
+ ); + return ( ( -
- - - {monthDate.toLocaleString("en-US", { - month: "long", - year: "numeric", - })} - - -
- )} + renderCustomHeader={renderHeader} selected={selectedDate} onChange={setSelectedDate} monthsShown={monthsShown} From 552f2f0d0ff65fb17a02e3db8712d48394657488 Mon Sep 17 00:00:00 2001 From: balajis-qb Date: Tue, 25 Nov 2025 14:01:06 +0530 Subject: [PATCH 3/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20handleChang?= =?UTF-8?q?eRaw=20in=20RawChange=20example=20for=20improved=20event=20hand?= =?UTF-8?q?ling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updated the handleChangeRaw function to accept a more specific event type and simplified the onChangeRaw prop by directly passing the handler. This change enhances code clarity and maintains consistency in event handling across the DatePicker examples. --- docs-site/src/examples/ts/rawChange.tsx | 35 +++++++++++-------------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/docs-site/src/examples/ts/rawChange.tsx b/docs-site/src/examples/ts/rawChange.tsx index bb3bb3ee2e..939d702d83 100644 --- a/docs-site/src/examples/ts/rawChange.tsx +++ b/docs-site/src/examples/ts/rawChange.tsx @@ -7,17 +7,24 @@ const RawChange = () => { const [selectedDate, setSelectedDate] = useState(null); const handleChangeRaw = ( - value: string, + event: + | React.MouseEvent + | React.KeyboardEvent + | React.ChangeEvent, selectedDateMeta?: SelectedDateMeta | null, ) => { - console.log( - selectedDateMeta - ? `Selected Date Meta: ${JSON.stringify(selectedDateMeta)}` - : "No Selection Meta is available", - ); + if (event.target instanceof HTMLInputElement) { + const value = event.target.value; - if (value === "tomorrow") { - setSelectedDate(DateFNS.addDays(new Date(), 1)); + console.log( + selectedDateMeta + ? `Selected Date Meta: ${JSON.stringify(selectedDateMeta)}` + : "No Selection Meta is available", + ); + + if (value === "tomorrow") { + setSelectedDate(DateFNS.addDays(new Date(), 1)); + } } }; @@ -26,17 +33,7 @@ const RawChange = () => { selected={selectedDate} onChange={setSelectedDate} placeholderText='Enter "tomorrow"' - onChangeRaw={( - event: - | React.MouseEvent - | React.KeyboardEvent - | React.ChangeEvent, - selectedDateMeta?: SelectedDateMeta | null, - ) => { - if (event.target instanceof HTMLInputElement) { - handleChangeRaw(event.target.value, selectedDateMeta); - } - }} + onChangeRaw={handleChangeRaw} /> ); }; From 145ad9c80cb810fb0f5e922251d56327786a2c6a Mon Sep 17 00:00:00 2001 From: balajis-qb Date: Tue, 25 Nov 2025 14:02:11 +0530 Subject: [PATCH 4/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20date=20type?= =?UTF-8?q?=20definitions=20in=20examples=20for=20improved=20consistency?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updated various TypeScript type definitions across multiple example files to use `Array<{}>` syntax for better clarity and uniformity. This change enhances code readability and maintains consistency in how date-related types are defined throughout the documentation examples. --- docs-site/src/examples/ts/customDayClassName.tsx | 8 +++++--- docs-site/src/examples/ts/excludeDateIntervals.tsx | 4 ++-- docs-site/src/examples/ts/excludeDates.tsx | 6 +++--- docs-site/src/examples/ts/excludeDatesMonthPicker.tsx | 6 +++--- .../src/examples/ts/excludeDatesRangeMonthPicker.tsx | 6 +++--- docs-site/src/examples/ts/excludeDatesWithMessage.tsx | 6 +++--- docs-site/src/examples/ts/excludeWeeks.tsx | 4 ++-- docs-site/src/examples/ts/highlightDates.tsx | 2 +- docs-site/src/examples/ts/highlightDatesRanges.tsx | 2 +- docs-site/src/examples/ts/includeDateIntervals.tsx | 4 ++-- docs-site/src/examples/ts/onBlurCallbacks.tsx | 1 + docs-site/src/examples/ts/rangeSwapRange.tsx | 6 +++--- .../src/examples/ts/selectsRangeWithDisabledDates.tsx | 6 +++--- 13 files changed, 32 insertions(+), 29 deletions(-) diff --git a/docs-site/src/examples/ts/customDayClassName.tsx b/docs-site/src/examples/ts/customDayClassName.tsx index edef3a43bd..12c307b6bc 100644 --- a/docs-site/src/examples/ts/customDayClassName.tsx +++ b/docs-site/src/examples/ts/customDayClassName.tsx @@ -1,13 +1,15 @@ const CustomDayClassName = () => { const [selectedDate, setSelectedDate] = useState(new Date()); + const getDayClassName = (date: Date): string => { + return date.getDate() === 1 ? "text-success" : ""; + }; + return ( - DateFNS.getDate(date) < Math.random() * 31 ? "random" : undefined - } + dayClassName={getDayClassName} /> ); }; diff --git a/docs-site/src/examples/ts/excludeDateIntervals.tsx b/docs-site/src/examples/ts/excludeDateIntervals.tsx index 2305884ba2..651519baf4 100644 --- a/docs-site/src/examples/ts/excludeDateIntervals.tsx +++ b/docs-site/src/examples/ts/excludeDateIntervals.tsx @@ -1,7 +1,7 @@ -type TExcludeDateIntervals = { +type TExcludeDateIntervals = Array<{ start: Date; end: Date; -}[]; +}>; const ExcludeDateIntervals = () => { const [selectedDate, setSelectedDate] = useState(new Date()); diff --git a/docs-site/src/examples/ts/excludeDates.tsx b/docs-site/src/examples/ts/excludeDates.tsx index 81f5bc410c..2ea17b3bba 100644 --- a/docs-site/src/examples/ts/excludeDates.tsx +++ b/docs-site/src/examples/ts/excludeDates.tsx @@ -1,9 +1,9 @@ type TExcludeDates = - | { + | Array<{ date: Date; message?: string; - }[] - | Date[]; + }> + | Array; const ExcludeDates = () => { const [selectedDate, setSelectedDate] = useState(new Date()); diff --git a/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx b/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx index 99b82cb503..7bf54c0f1b 100644 --- a/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx +++ b/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx @@ -1,9 +1,9 @@ type TExcludeDates = - | { + | Array<{ date: Date; message?: string; - }[] - | Date[]; + }> + | Array; const ExcludeDatesMonthPicker = () => { const [selectedDate, setSelectedDate] = useState( diff --git a/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx b/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx index 5732fd1931..ee0365166e 100644 --- a/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx +++ b/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx @@ -1,9 +1,9 @@ type TExcludeDates = - | { + | Array<{ date: Date; message?: string; - }[] - | Date[]; + }> + | Array; const ExcludeDatesRangeMonthPicker = () => { const defaultStartDate = new Date("2024-08-01"); diff --git a/docs-site/src/examples/ts/excludeDatesWithMessage.tsx b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx index be8a89dbfa..a3f377635b 100644 --- a/docs-site/src/examples/ts/excludeDatesWithMessage.tsx +++ b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx @@ -1,9 +1,9 @@ type TExcludeDates = - | { + | Array<{ date: Date; message?: string; - }[] - | Date[]; + }> + | Array; const ExcludeDatesWithMessage = () => { const [selectedDate, setSelectedDate] = useState(new Date()); diff --git a/docs-site/src/examples/ts/excludeWeeks.tsx b/docs-site/src/examples/ts/excludeWeeks.tsx index ceeb41173c..67e8e2da22 100644 --- a/docs-site/src/examples/ts/excludeWeeks.tsx +++ b/docs-site/src/examples/ts/excludeWeeks.tsx @@ -1,7 +1,7 @@ -type TExcludeDateIntervals = { +type TExcludeDateIntervals = Array<{ start: Date | string; end: Date | string; -}[]; +}>; const ExcludeWeeks = () => { const [selectedDate, setSelectedDate] = useState( diff --git a/docs-site/src/examples/ts/highlightDates.tsx b/docs-site/src/examples/ts/highlightDates.tsx index f48d705e80..8616ff9568 100644 --- a/docs-site/src/examples/ts/highlightDates.tsx +++ b/docs-site/src/examples/ts/highlightDates.tsx @@ -2,7 +2,7 @@ type HighlightDate = { [className: string]: Date[]; }; -type THighlightDates = (Date | HighlightDate)[]; +type THighlightDates = Array; const HighlightDates = () => { const [selectedDate, setSelectedDate] = useState(new Date()); diff --git a/docs-site/src/examples/ts/highlightDatesRanges.tsx b/docs-site/src/examples/ts/highlightDatesRanges.tsx index cd8f14a52b..55f29bade0 100644 --- a/docs-site/src/examples/ts/highlightDatesRanges.tsx +++ b/docs-site/src/examples/ts/highlightDatesRanges.tsx @@ -3,7 +3,7 @@ type HighlightDate = { [className: string]: Date[]; }; -type THighlightDates = (Date | HighlightDate)[]; +type THighlightDates = Array; const HighlightDatesRanges = () => { const [selectedDate, setSelectedDate] = useState(new Date()); diff --git a/docs-site/src/examples/ts/includeDateIntervals.tsx b/docs-site/src/examples/ts/includeDateIntervals.tsx index bb575978f3..c4b2688602 100644 --- a/docs-site/src/examples/ts/includeDateIntervals.tsx +++ b/docs-site/src/examples/ts/includeDateIntervals.tsx @@ -1,8 +1,8 @@ const { subDays, addDays } = DateFNS; -type TIncludeDateIntervals = { +type TIncludeDateIntervals = Array<{ start: Date; end: Date; -}[]; +}>; const IncludeDateIntervals = () => { const [selectedDate, setSelectedDate] = useState(null); diff --git a/docs-site/src/examples/ts/onBlurCallbacks.tsx b/docs-site/src/examples/ts/onBlurCallbacks.tsx index c9ba98729e..fe55387228 100644 --- a/docs-site/src/examples/ts/onBlurCallbacks.tsx +++ b/docs-site/src/examples/ts/onBlurCallbacks.tsx @@ -7,6 +7,7 @@ const OnBlurCallbacks = () => { target: { value }, }: React.FocusEvent) => { const date = new Date(value); + if (isValid(date)) { console.log("date: %s", format(date, "dd/MM/yyyy")); } else { diff --git a/docs-site/src/examples/ts/rangeSwapRange.tsx b/docs-site/src/examples/ts/rangeSwapRange.tsx index b5d7127fdd..f67fbe38e2 100644 --- a/docs-site/src/examples/ts/rangeSwapRange.tsx +++ b/docs-site/src/examples/ts/rangeSwapRange.tsx @@ -1,11 +1,11 @@ const { addDays } = DateFNS; type TExcludeDates = - | { + | Array<{ date: Date; message?: string; - }[] - | Date[]; + }> + | Array; const RangeSwapRange = () => { const [startDate, setStartDate] = useState(new Date()); diff --git a/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx index 56a4dc2914..05bfc0d6af 100644 --- a/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx +++ b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx @@ -1,10 +1,10 @@ const { addDays } = DateFNS; type TExcludeDate = - | { + | Array<{ date: Date; message?: string; - }[] - | Date[]; + }> + | Array; const SelectsRangeWithDisabledDates = () => { const [startDate, setStartDate] = useState(new Date()); From 5c7eb82d88f1fb22c9db18b9f9392a168c8917d8 Mon Sep 17 00:00:00 2001 From: balajis-qb Date: Tue, 25 Nov 2025 14:17:06 +0530 Subject: [PATCH 5/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20ExampleCust?= =?UTF-8?q?omInput=20component=20for=20improved=20clarity?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-site/src/examples/ts/customInput.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/docs-site/src/examples/ts/customInput.tsx b/docs-site/src/examples/ts/customInput.tsx index 5332628794..99b1285a15 100644 --- a/docs-site/src/examples/ts/customInput.tsx +++ b/docs-site/src/examples/ts/customInput.tsx @@ -4,18 +4,19 @@ type ExampleCustomInputProps = { onClick?: () => void; }; +const ExampleCustomInput = forwardRef< + HTMLButtonElement, + ExampleCustomInputProps +>(({ value, onClick, className }, ref) => ( + +)); +ExampleCustomInput.displayName = "ExampleCustomInput"; + const CustomInput = () => { const [selectedDate, setSelectedDate] = useState(new Date()); - const ExampleCustomInput = forwardRef< - HTMLButtonElement, - ExampleCustomInputProps - >(({ value, onClick, className }, ref) => ( - - )); - return (