Add max range length

Author: hoorayimhelping

src/components/DatePicker/DateRangePicker.stories.tsx

@@ -33,6 +33,7 @@ const getMonthsByNumber = (numberOfMonths: number): Array<DateRange> => {
 const meta: Meta<typeof DateRangePicker> = {
   component: DateRangePicker,
   args: {
+    maxRangeLength: undefined,
     onSelectDateRange: (startDate: Date, endDate: Date) => {
       console.log("Date range selected: ", startDate, endDate);
     },
@@ -47,6 +48,9 @@ const meta: Meta<typeof DateRangePicker> = {
     futureDatesDisabled: {
       control: "boolean",
     },
+    maxRangeLength: {
+      control: "number",
+    },
     placeholder: {
       control: "text",
     },
@@ -69,13 +73,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}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
         startDate={startDate}
@@ -84,10 +90,18 @@ export const Default: Story = {
   },
 };
 
+export const DateRangeWithMaxRange: Story = {
+  args: {
+    maxRangeLength: 15,
+    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 (
@@ -96,6 +110,7 @@ export const PredefinedDatesLastSixMonths: Story = {
         endDate={endDate}
         disabled={args.disabled}
         futureDatesDisabled={args.futureDatesDisabled}
+        maxRangeLength={maxRangeLength}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
         predefinedDatesList={predefinedDatesList}
@@ -109,6 +124,7 @@ 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 (
@@ -117,6 +133,7 @@ export const PredefinedDatesNextSixMonths: Story = {
         endDate={endDate}
         disabled={args.disabled}
         futureDatesDisabled={args.futureDatesDisabled}
+        maxRangeLength={maxRangeLength}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
         predefinedDatesList={predefinedDatesList}
@@ -130,6 +147,7 @@ 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") },
@@ -142,6 +160,7 @@ export const PredefinedDatesArbitraryDates: Story = {
         endDate={endDate}
         disabled={args.disabled}
         futureDatesDisabled={args.futureDatesDisabled}
+        maxRangeLength={maxRangeLength}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
         predefinedDatesList={predefinedDatesList}
@@ -155,6 +174,7 @@ 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") },
@@ -174,6 +194,7 @@ export const PredefinedDatesScrollable: Story = {
         endDate={endDate}
         disabled={args.disabled}
         futureDatesDisabled={args.futureDatesDisabled}
+        maxRangeLength={maxRangeLength}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
         predefinedDatesList={predefinedDatesList}

src/components/DatePicker/DateRangePicker.tsx

@@ -62,10 +62,22 @@ const DateRangeTableCell = styled(DateTableCell)<{
     `}
 `;
 
+const datesAreWithinMaxRange = (
+  startDate: Date,
+  endDate: Date,
+  maxRangeLength: number
+): boolean => {
+  const daysDifference =
+    Math.abs(startDate.getTime() - endDate.getTime()) / (1000 * 60 * 60 * 24);
+
+  return daysDifference >= maxRangeLength;
+};
+
 interface CalendarProps {
   calendarBody: Body;
   closeDatepicker: () => void;
   futureDatesDisabled: boolean;
+  maxRangeLength: number;
   setSelectedDate: (selectedDate: Date) => void;
   startDate?: Date;
   endDate?: Date;
@@ -75,6 +87,7 @@ const Calendar = ({
   calendarBody,
   closeDatepicker,
   futureDatesDisabled,
+  maxRangeLength,
   setSelectedDate,
   startDate,
   endDate,
@@ -96,11 +109,24 @@ const Calendar = ({
           const today = new Date();
 
           const isCurrentDate = isSameDate(today, fullDate);
-          const isDisabled = futureDatesDisabled ? fullDate > today : false;
           const isBetweenStartAndEndDates = Boolean(
             startDate && endDate && fullDate > startDate && fullDate < endDate
           );
 
+          maxRangeLength;
+          let isDisabled = false;
+          if (futureDatesDisabled && fullDate > today) {
+            isDisabled = true;
+          }
+
+          if (
+            maxRangeLength > 1 &&
+            startDate &&
+            datesAreWithinMaxRange(startDate, fullDate, maxRangeLength)
+          ) {
+            isDisabled = true;
+          }
+
           const shouldShowRangeIndicator =
             !endDate &&
             Boolean(
@@ -281,6 +307,7 @@ export interface DateRangePickerProps {
   onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;
   placeholder?: string;
   predefinedDatesList?: Array<DateRange>;
+  maxRangeLength?: number;
   startDate?: Date;
 }
 
@@ -289,6 +316,7 @@ export const DateRangePicker = ({
   startDate,
   disabled = false,
   futureDatesDisabled = false,
+  maxRangeLength = -1,
   onSelectDateRange,
   placeholder = "start date – end date",
   predefinedDatesList,
@@ -411,6 +439,7 @@ export const DateRangePicker = ({
                       calendarBody={body}
                       closeDatepicker={closeDatePicker}
                       futureDatesDisabled={futureDatesDisabled}
+                      maxRangeLength={maxRangeLength}
                       setSelectedDate={handleSelectDate}
                       startDate={selectedStartDate}
                       endDate={selectedEndDate}
@@ -427,6 +456,7 @@ export const DateRangePicker = ({
                 calendarBody={body}
                 closeDatepicker={closeDatePicker}
                 futureDatesDisabled={futureDatesDisabled}
+                maxRangeLength={maxRangeLength}
                 setSelectedDate={handleSelectDate}
                 startDate={selectedStartDate}
                 endDate={selectedEndDate}