Enhance the readability of doc-sites examples

docs-site/src/examples/ts/calendarContainer.tsx

@@ -23,7 +23,7 @@ const CustomCalendarContainer = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       calendarContainer={MyContainer}
     />
   );

docs-site/src/examples/ts/calendarIcon.tsx

@@ -2,11 +2,7 @@ const CalendarIcon = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
-    <DatePicker
-      showIcon
-      selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
-    />
+    <DatePicker showIcon selected={selectedDate} onChange={setSelectedDate} />
   );
 };
 

docs-site/src/examples/ts/calendarIconExternal.tsx

@@ -5,7 +5,7 @@ const CalendarIconExternal = () => {
     <DatePicker
       showIcon
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       icon="fa fa-calendar"
     />
   );

docs-site/src/examples/ts/calendarIconSvgIcon.tsx

@@ -5,7 +5,7 @@ const CalendarIconSvgIcon = () => {
     <DatePicker
       showIcon
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       icon={
         <svg
           xmlns="http://www.w3.org/2000/svg"

docs-site/src/examples/ts/calendarStartDay.tsx

@@ -4,7 +4,7 @@ const CalendarStartDay = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       calendarStartDay={3}
     />
   );

docs-site/src/examples/ts/children.tsx

@@ -2,10 +2,7 @@ const Children = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
-    <DatePicker
-      selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
-    >
+    <DatePicker selected={selectedDate} onChange={setSelectedDate}>
       <div style={{ color: "red" }}>Don't forget to check the weather!</div>
     </DatePicker>
   );

docs-site/src/examples/ts/clearInput.tsx

@@ -4,7 +4,7 @@ const ClearInput = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       isClearable
       placeholderText="I have been cleared!"
     />

docs-site/src/examples/ts/closeOnScroll.tsx

@@ -5,7 +5,7 @@ const CloseOnScroll = () => {
     <DatePicker
       closeOnScroll
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
     />
   );
 };

docs-site/src/examples/ts/closeOnScrollCallback.tsx

@@ -5,7 +5,7 @@ const CloseOnScrollCallback = () => {
     <DatePicker
       closeOnScroll={(e: Event): boolean => e.target === document}
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
     />
   );
 };

docs-site/src/examples/ts/configureFloatingUI.tsx

@@ -4,7 +4,7 @@ const ConfigureFloatingUI = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       popperClassName="some-custom-class"
       popperPlacement="top-end"
       popperModifiers={[

docs-site/src/examples/ts/customCalendarClassName.tsx

@@ -4,7 +4,7 @@ const CustomCalendarClassName = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       calendarClassName="rasta-stripes"
     />
   );

docs-site/src/examples/ts/customClassName.tsx

@@ -4,7 +4,7 @@ const CustomClassName = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       className="red-border"
     />
   );

docs-site/src/examples/ts/customDateFormat.tsx

@@ -5,7 +5,7 @@ const CustomDateFormat = () => {
     <DatePicker
       dateFormat="yyyy/MM/dd"
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
     />
   );
 };

docs-site/src/examples/ts/customDayClassName.tsx

@@ -1,13 +1,15 @@
 const CustomDayClassName = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
+  const getDayClassName = (date: Date): string => {
+    return date.getDate() === 1 ? "text-success" : "";
+  };
+
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
-      dayClassName={(date: Date) =>
-        DateFNS.getDate(date) < Math.random() * 31 ? "random" : undefined
-      }
+      onChange={setSelectedDate}
+      dayClassName={getDayClassName}
     />
   );
 };

docs-site/src/examples/ts/customInput.tsx

@@ -4,22 +4,23 @@ type ExampleCustomInputProps = {
   onClick?: () => void;
 };
 
+const ExampleCustomInput = forwardRef<
+  HTMLButtonElement,
+  ExampleCustomInputProps
+>(({ value, onClick, className }, ref) => (
+  <button type="button" className={className} onClick={onClick} ref={ref}>
+    {value}
+  </button>
+));
+ExampleCustomInput.displayName = "ExampleCustomInput";
+
 const CustomInput = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
-  const ExampleCustomInput = forwardRef<
-    HTMLButtonElement,
-    ExampleCustomInputProps
-  >(({ value, onClick, className }, ref) => (
-    <button className={className} onClick={onClick} ref={ref}>
-      {value}
-    </button>
-  ));
-
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       customInput={<ExampleCustomInput className="example-custom-input" />}
     />
   );

docs-site/src/examples/ts/customTimeClassName.tsx

@@ -11,7 +11,7 @@ const CustomTimeClassName = () => {
     <DatePicker
       showTimeSelect
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       timeClassName={handleColor}
     />
   );

docs-site/src/examples/ts/customTimeInput.tsx

@@ -26,7 +26,7 @@ const CustomTimeInput = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       showTimeInput
       customTimeInput={<ExampleCustomTimeInput />}
     />

docs-site/src/examples/ts/dateRange.tsx

@@ -8,14 +8,14 @@ const DateRange = () => {
     <>
       <DatePicker
         selected={selectedDate}
-        onChange={(date: Date | null) => setStartDate(date)}
+        onChange={setStartDate}
         selectsStart
         startDate={selectedDate}
         endDate={endDate}
       />
       <DatePicker
         selected={endDate}
-        onChange={(date: Date | null) => setEndDate(date)}
+        onChange={setEndDate}
         selectsEnd
         startDate={selectedDate}
         endDate={endDate}

docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx

@@ -9,9 +9,7 @@ const DateRangeInputWithClearButton = () => {
     <DatePicker
       startDate={startDate}
       endDate={endDate}
-      onChange={(update: [Date | null, Date | null]) => {
-        setDateRange(update);
-      }}
+      onChange={setDateRange}
       selectsRange
       isClearable
     />

docs-site/src/examples/ts/dateRangeWithPortal.tsx

@@ -9,9 +9,7 @@ const DateRangeWithPortal = () => {
     <DatePicker
       startDate={startDate}
       endDate={endDate}
-      onChange={(update: [Date | null, Date | null]) => {
-        setDateRange(update);
-      }}
+      onChange={setDateRange}
       selectsRange
       withPortal
     />

docs-site/src/examples/ts/default.tsx

@@ -1,12 +1,11 @@
 const Default = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
-  return (
-    <DatePicker
-      selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
-    />
-  );
+  const handleChange = (date: Date | null) => {
+    setSelectedDate(date);
+  };
+
+  return <DatePicker selected={selectedDate} onChange={handleChange} />;
 };
 
 render(Default);

docs-site/src/examples/ts/disabled.tsx

@@ -4,7 +4,7 @@ const Disabled = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       disabled
       placeholderText="This is disabled"
     />

docs-site/src/examples/ts/disabledInline.tsx

@@ -4,7 +4,7 @@ const DisabledInline = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       disabled
       inline
     />

docs-site/src/examples/ts/disabledKeyboardNavigation.tsx

@@ -4,7 +4,7 @@ const DisabledKeyboardNavigation = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       disabledKeyboardNavigation
       placeholderText="This has disabled keyboard navigation"
     />

docs-site/src/examples/ts/dontCloseOnSelect.tsx

@@ -4,7 +4,7 @@ const DontCloseOnSelect = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       shouldCloseOnSelect={false}
     />
   );

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<Date | null>(new Date());
@@ -16,7 +16,7 @@ const ExcludeDateIntervals = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       excludeDateIntervals={excludeDateIntervals}
       placeholderText="Select a date other than the interval from 5 days ago to 5 days in the future"
     />

docs-site/src/examples/ts/excludeDates.tsx

@@ -1,9 +1,9 @@
 type TExcludeDates =
-  | {
+  | Array<{
       date: Date;
       message?: string;
-    }[]
-  | Date[];
+    }>
+  | Array<Date>;
 
 const ExcludeDates = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
@@ -16,7 +16,7 @@ const ExcludeDates = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       excludeDates={excludeDates}
       placeholderText="Select a date other than today or yesterday"
     />

docs-site/src/examples/ts/excludeDatesMonthPicker.tsx

@@ -1,9 +1,9 @@
 type TExcludeDates =
-  | {
+  | Array<{
       date: Date;
       message?: string;
-    }[]
-  | Date[];
+    }>
+  | Array<Date>;
 
 const ExcludeDatesMonthPicker = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(
@@ -18,7 +18,7 @@ const ExcludeDatesMonthPicker = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       dateFormat="MM/yyyy"
       excludeDates={excludeDates}
       showMonthYearPicker

docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx

@@ -1,9 +1,9 @@
 type TExcludeDates =
-  | {
+  | Array<{
       date: Date;
       message?: string;
-    }[]
-  | Date[];
+    }>
+  | Array<Date>;
 
 const ExcludeDatesRangeMonthPicker = () => {
   const defaultStartDate = new Date("2024-08-01");

docs-site/src/examples/ts/excludeDatesWithMessage.tsx

@@ -1,9 +1,9 @@
 type TExcludeDates =
-  | {
+  | Array<{
       date: Date;
       message?: string;
-    }[]
-  | Date[];
+    }>
+  | Array<Date>;
 
 const ExcludeDatesWithMessage = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
@@ -16,7 +16,7 @@ const ExcludeDatesWithMessage = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       excludeDates={excludeDates}
       placeholderText="Select a date other than today or yesterday"
     />

docs-site/src/examples/ts/excludeTimePeriod.tsx

@@ -8,7 +8,7 @@ const ExcludeTimePeriod = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       showTimeSelect
       minTime={setHours(setMinutes(new Date(), 0), 17)}
       maxTime={setHours(setMinutes(new Date(), 30), 20)}