Add futureStartDatesDisabled

Author: hoorayimhelping

src/components/DatePicker/DateRangePicker.stories.tsx

@@ -48,6 +48,9 @@ const meta: Meta<typeof DateRangePicker> = {
     futureDatesDisabled: {
       control: "boolean",
     },
+    futureStartDatesDisabled: {
+      control: "boolean",
+    },
     maxRangeLength: {
       control: "number",
     },
@@ -73,15 +76,15 @@ export const Default: Story = {
   render: (args: Args) => {
     const endDate = args.endDate ? new Date(args.endDate) : undefined;
     const startDate = args.startDate ? new Date(args.startDate) : undefined;
-    const maxRangeLength = args.maxRangeLength;
 
     return (
       <DateRangePicker
         key="default"
         endDate={endDate}
         disabled={args.disabled}
         futureDatesDisabled={args.futureDatesDisabled}
-        maxRangeLength={maxRangeLength}
+        futureStartDatesDisabled={args.futureStartDatesDisabled}
+        maxRangeLength={args.maxRangeLength}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
         startDate={startDate}
@@ -97,11 +100,17 @@ export const DateRangeWithMaxRange: Story = {
   },
 };
 
+export const DateRangeFutureStartDatesDisabled: Story = {
+  args: {
+    futureStartDatesDisabled: true,
+    predefinedDatesList: [],
+  },
+};
+
 export const PredefinedDatesLastSixMonths: Story = {
   render: (args: Args) => {
     const endDate = args.endDate ? new Date(args.endDate) : undefined;
     const startDate = args.startDate ? new Date(args.startDate) : undefined;
-    const maxRangeLength = args.maxRangeLength;
     const predefinedDatesList = getMonthsByNumber(-6);
 
     return (
@@ -110,7 +119,8 @@ export const PredefinedDatesLastSixMonths: Story = {
         endDate={endDate}
         disabled={args.disabled}
         futureDatesDisabled={args.futureDatesDisabled}
-        maxRangeLength={maxRangeLength}
+        futureStartDatesDisabled={args.futureStartDatesDisabled}
+        maxRangeLength={args.maxRangeLength}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
         predefinedDatesList={predefinedDatesList}
@@ -124,7 +134,6 @@ export const PredefinedDatesNextSixMonths: Story = {
   render: (args: Args) => {
     const endDate = args.endDate ? new Date(args.endDate) : undefined;
     const startDate = args.startDate ? new Date(args.startDate) : undefined;
-    const maxRangeLength = args.maxRangeLength;
     const predefinedDatesList = getMonthsByNumber(6);
 
     return (
@@ -133,7 +142,8 @@ export const PredefinedDatesNextSixMonths: Story = {
         endDate={endDate}
         disabled={args.disabled}
         futureDatesDisabled={args.futureDatesDisabled}
-        maxRangeLength={maxRangeLength}
+        futureStartDatesDisabled={args.futureStartDatesDisabled}
+        maxRangeLength={args.maxRangeLength}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
         predefinedDatesList={predefinedDatesList}
@@ -147,7 +157,6 @@ export const PredefinedDatesArbitraryDates: Story = {
   render: (args: Args) => {
     const endDate = args.endDate ? new Date(args.endDate) : undefined;
     const startDate = args.startDate ? new Date(args.startDate) : undefined;
-    const maxRangeLength = args.maxRangeLength;
     const predefinedDatesList = [
       { startDate: new Date("04/14/2025"), endDate: new Date("05/14/2025") },
       { startDate: new Date("05/14/2025"), endDate: new Date("06/14/2025") },
@@ -160,7 +169,8 @@ export const PredefinedDatesArbitraryDates: Story = {
         endDate={endDate}
         disabled={args.disabled}
         futureDatesDisabled={args.futureDatesDisabled}
-        maxRangeLength={maxRangeLength}
+        futureStartDatesDisabled={args.futureStartDatesDisabled}
+        maxRangeLength={args.maxRangeLength}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
         predefinedDatesList={predefinedDatesList}
@@ -174,7 +184,6 @@ export const PredefinedDatesScrollable: Story = {
   render: (args: Args) => {
     const endDate = args.endDate ? new Date(args.endDate) : undefined;
     const startDate = args.startDate ? new Date(args.startDate) : undefined;
-    const maxRangeLength = args.maxRangeLength;
     const predefinedDatesList = [
       { startDate: new Date("09/14/2024"), endDate: new Date("10/14/2024") },
       { startDate: new Date("10/14/2024"), endDate: new Date("11/14/2024") },
@@ -194,7 +203,8 @@ export const PredefinedDatesScrollable: Story = {
         endDate={endDate}
         disabled={args.disabled}
         futureDatesDisabled={args.futureDatesDisabled}
-        maxRangeLength={maxRangeLength}
+        futureStartDatesDisabled={args.futureStartDatesDisabled}
+        maxRangeLength={args.maxRangeLength}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
         predefinedDatesList={predefinedDatesList}

src/components/DatePicker/DateRangePicker.tsx

@@ -77,6 +77,7 @@ interface CalendarProps {
   calendarBody: Body;
   closeDatepicker: () => void;
   futureDatesDisabled: boolean;
+  futureStartDatesDisabled: boolean;
   maxRangeLength: number;
   setSelectedDate: (selectedDate: Date) => void;
   startDate?: Date;
@@ -87,6 +88,7 @@ const Calendar = ({
   calendarBody,
   closeDatepicker,
   futureDatesDisabled,
+  futureStartDatesDisabled,
   maxRangeLength,
   setSelectedDate,
   startDate,
@@ -119,6 +121,10 @@ const Calendar = ({
             isDisabled = true;
           }
 
+          if (futureStartDatesDisabled && !startDate && fullDate > today) {
+            isDisabled = true;
+          }
+
           if (
             maxRangeLength > 1 &&
             startDate &&
@@ -304,6 +310,7 @@ export interface DateRangePickerProps {
   endDate?: Date;
   disabled?: boolean;
   futureDatesDisabled?: boolean;
+  futureStartDatesDisabled?: boolean;
   onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;
   placeholder?: string;
   predefinedDatesList?: Array<DateRange>;
@@ -316,6 +323,7 @@ export const DateRangePicker = ({
   startDate,
   disabled = false,
   futureDatesDisabled = false,
+  futureStartDatesDisabled = false,
   maxRangeLength = -1,
   onSelectDateRange,
   placeholder = "start date – end date",
@@ -363,6 +371,11 @@ export const DateRangePicker = ({
       // Start date and end date are selected, user clicks any date.
       // Set start date to the selected date, clear the end date.
       if (selectedStartDate && selectedEndDate) {
+        // If futureStartDatesDisabled is true, only set the selected date to the date clicked if it's before today
+        if (futureStartDatesDisabled && selectedDate > new Date()) {
+          setSelectedEndDate(undefined);
+          return;
+        }
         setSelectedStartDate(selectedDate);
         setSelectedEndDate(undefined);
         return;
@@ -392,7 +405,7 @@ export const DateRangePicker = ({
 
       setSelectedStartDate(selectedDate);
     },
-    [onSelectDateRange, selectedEndDate, selectedStartDate]
+    [futureStartDatesDisabled, onSelectDateRange, selectedEndDate, selectedStartDate]
   );
 
   const shouldShowPredefinedDates =
@@ -439,6 +452,7 @@ export const DateRangePicker = ({
                       calendarBody={body}
                       closeDatepicker={closeDatePicker}
                       futureDatesDisabled={futureDatesDisabled}
+                      futureStartDatesDisabled={futureStartDatesDisabled}
                       maxRangeLength={maxRangeLength}
                       setSelectedDate={handleSelectDate}
                       startDate={selectedStartDate}
@@ -456,6 +470,7 @@ export const DateRangePicker = ({
                 calendarBody={body}
                 closeDatepicker={closeDatePicker}
                 futureDatesDisabled={futureDatesDisabled}
+                futureStartDatesDisabled={futureStartDatesDisabled}
                 maxRangeLength={maxRangeLength}
                 setSelectedDate={handleSelectDate}
                 startDate={selectedStartDate}