✏️ Renamed the startDate variable in the example code to the selectedDate to improve clarity and better reflect it's purpose

docs-site/src/examples/calendarContainer.js

@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   const MyContainer = ({ className, children }) => {
     return (
       <div style={{ padding: "16px", background: "#216ba5", color: "#fff" }}>
@@ -14,8 +14,8 @@
   };
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       calendarContainer={MyContainer}
     />
   );

docs-site/src/examples/calendarIcon.js

@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       showIcon
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
     />
   );
 };

docs-site/src/examples/calendarIconExternal.js

@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       showIcon
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       icon="fa fa-calendar"
     />
   );

docs-site/src/examples/calendarIconSvgIcon.js

@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       showIcon
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       icon={
         <svg
           xmlns="http://www.w3.org/2000/svg"

docs-site/src/examples/calendarStartDay.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       calendarStartDay={3}
     />
   );

docs-site/src/examples/children.js

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

docs-site/src/examples/clearInput.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       isClearable
       placeholderText="I have been cleared!"
     />

docs-site/src/examples/closeOnScroll.js

@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       closeOnScroll={true}
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
     />
   );
 };

docs-site/src/examples/closeOnScrollCallback.js

@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       closeOnScroll={(e) => e.target === document}
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
     />
   );
 };

docs-site/src/examples/configureFloatingUI.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       popperClassName="some-custom-class"
       popperPlacement="top-end"
       popperModifiers={[

docs-site/src/examples/customCalendarClassName.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       calendarClassName="rasta-stripes"
     />
   );

docs-site/src/examples/customClassName.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       className="red-border"
     />
   );

docs-site/src/examples/customDateFormat.js

@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       dateFormat="yyyy/MM/dd"
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
     />
   );
 };

docs-site/src/examples/customDayClassName.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dayClassName={(date) =>
         getDate(date) < Math.random() * 31 ? "random" : undefined
       }

docs-site/src/examples/customInput.js

@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   const ExampleCustomInput = forwardRef(
     ({ value, onClick, className }, ref) => (
       <button className={className} onClick={onClick} ref={ref}>
@@ -9,8 +9,8 @@
   );
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       customInput={<ExampleCustomInput className="example-custom-input" />}
     />
   );

docs-site/src/examples/customTimeClassName.js

@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState(new Date());
 
   let handleColor = (time) => {
     return time.getHours() > 12 ? "text-success" : "text-error";
@@ -8,8 +8,8 @@
   return (
     <DatePicker
       showTimeSelect
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       timeClassName={handleColor}
     />
   );

docs-site/src/examples/customTimeInput.js

@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   const ExampleCustomTimeInput = ({ value, onChange }) => (
     <input
       value={value}
@@ -10,8 +10,8 @@
   );
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       showTimeInput
       customTimeInput={<ExampleCustomTimeInput />}
     />

docs-site/src/examples/default.js

@@ -1,6 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
-    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
+    <DatePicker
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
+    />
   );
 };

docs-site/src/examples/disabled.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       disabled
       placeholderText="This is disabled"
     />

docs-site/src/examples/disabledKeyboardNavigation.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       disabledKeyboardNavigation
       placeholderText="This has disabled keyboard navigation"
     />

docs-site/src/examples/dontCloseOnSelect.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       shouldCloseOnSelect={false}
     />
   );

docs-site/src/examples/excludeDateIntervals.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       excludeDateIntervals={[
         { start: subDays(new Date(), 5), end: addDays(new Date(), 5) },
       ]}

docs-site/src/examples/excludeDates.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       excludeDates={[new Date(), subDays(new Date(), 1)]}
       placeholderText="Select a date other than today or yesterday"
     />

docs-site/src/examples/excludeDatesMonthPicker.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date("2024-08-01"));
+  const [selectedDate, setSelectedDate] = useState(new Date("2024-08-01"));
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       excludeDates={[new Date("2024-05-01"), new Date("2024-06-01")]}
       showMonthYearPicker

docs-site/src/examples/excludeDatesWithMessage.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       excludeDates={[
         { date: new Date(), message: "Today is excluded" },
         { date: subDays(new Date(), 1), message: "This day is excluded" },

docs-site/src/examples/excludeTimePeriod.js

@@ -1,11 +1,11 @@
 () => {
-  const [startDate, setStartDate] = useState(
+  const [selectedDateTime, setSelectedDateTime] = useState(
     setHours(setMinutes(new Date(), 30), 17),
   );
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       showTimeSelect
       minTime={setHours(setMinutes(new Date(), 0), 17)}
       maxTime={setHours(setMinutes(new Date(), 30), 20)}

docs-site/src/examples/excludeTimes.js

@@ -1,11 +1,11 @@
 () => {
-  const [startDate, setStartDate] = useState(
+  const [selectedDateTime, setSelectedDateTime] = useState(
     setHours(setMinutes(new Date(), 30), 16),
   );
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       showTimeSelect
       excludeTimes={[
         setHours(setMinutes(new Date(), 0), 17),

docs-site/src/examples/excludeWeeks.js

@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date("2021/02/22"));
+  const [selectedDate, setSelectedDate] = useState(new Date("2021/02/22"));
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dateFormat="I/R"
       locale="en-GB"
       excludeDateIntervals={[