DateRange: add readonly optinal prop to DateRange component (web) (#3851

)

docs/examples/daterange/readOnly.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { Flex } from 'gestalt';
+import { DateRange } from 'gestalt-datepicker';
+
+export default function Example() {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(new Date());
+
+  return (
+    <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
+      <DateRange
+        dateValue={{ startDate, endDate }}
+        onCancel={() => {}}
+        onDateChange={(newStartDate, newEndDate) => {
+          setStartDate(newStartDate.value);
+          setEndDate(newEndDate.value);
+        }}
+        onDateError={{ startDate: () => {}, endDate: () => {} }}
+        onSubmit={() => {}}
+        readOnly
+      />
+    </Flex>
+  );
+}

docs/pages/web/daterange.tsx

@@ -57,6 +57,7 @@ import localizationLabels from '../../examples/daterange/localizationLabels';
 import main from '../../examples/daterange/main';
 import mobile from '../../examples/daterange/mobile';
 import pastRadiogroup from '../../examples/daterange/pastRadioGroup';
+import readOnly from '../../examples/daterange/readOnly';
 import secondaryDateRange from '../../examples/daterange/secondaryDateRange';
 import secondaryErrorMessages from '../../examples/daterange/secondaryErrorMessages';
 
@@ -385,6 +386,22 @@ DateRange supports a secondary date range in case you need to handle more that o
             }
           />
         </MainSection.Subsection>
+        <MainSection.Subsection
+          description="DateRange supports read-only date inputs, this option prevents the user from changing the date values from the date fields (not from interacting with the fields). "
+          title="Read only"
+        >
+          <MainSection.Card
+            cardSize="lg"
+            sandpackExample={
+              <SandpackExample
+                code={readOnly}
+                layout="column"
+                name="Read only example"
+                previewHeight={PREVIEW_HEIGHT}
+              />
+            }
+          />
+        </MainSection.Subsection>
       </MainSection>
 
       <MainSection name="Writing">

packages/gestalt-datepicker/src/DateRange.jsdom.test.tsx

@@ -284,4 +284,28 @@ describe('DateRange', () => {
     expect(screen.queryByRole('button', { name: /cancel/i })).toBeNull();
     expect(screen.queryByRole('button', { name: /apply/i })).toBeNull();
   });
+
+  it('add readonly attribute to date inputs if readOnly prop is true', () => {
+    const props = {
+      dateValue: {
+        startDate: new Date('September 2, 2024 03:24:00'),
+        endDate: new Date('September 3, 2024 03:24:00'),
+      },
+      onDateChange: () => {},
+      onDateError: { startDate: () => {}, endDate: () => {} },
+    };
+
+    const { rerender } = render(<DateRange {...props} />);
+
+    const startDateInput = screen.getByDisplayValue('09 / 02 / 2024');
+    const endDateInput = screen.getByDisplayValue('09 / 03 / 2024');
+
+    expect(startDateInput).not.toHaveAttribute('readonly');
+    expect(endDateInput).not.toHaveAttribute('readonly');
+
+    rerender(<DateRange {...props} readOnly />);
+
+    expect(startDateInput).toHaveAttribute('readonly');
+    expect(endDateInput).toHaveAttribute('readonly');
+  });
 });

packages/gestalt-datepicker/src/DateRange.tsx

@@ -113,6 +113,9 @@ type Props = {
    * Customize your error message for the cases the user enters invalid dates. See the [error messaging variant](https://gestalt.pinterest.systems/web/daterange#Error-messaging) to learn more.
    */
   secondaryDateErrorMessage?: { startDate: string | null; endDate: string | null };
+  /**
+   * Prevents the user from changing the date values from the date fields (not from interacting with the fields).    */
+  readOnly?: boolean;
 };
 
 enum DateRangeType {
@@ -186,6 +189,7 @@ function DateRange({
   onSecondaryDateChange,
   onSecondaryDateError,
   onSecondaryDateFocus,
+  readOnly,
 }: Props) {
   const componentId = useId();
   const deviceType = useDeviceType();
@@ -300,6 +304,7 @@ function DateRange({
                             }}
                             onError={onDateErrorEvent?.startDate}
                             onFocus={onDateFocusEvent?.endDate}
+                            readOnly={readOnly}
                             value={startDate}
                           />
                         </Box>
@@ -324,6 +329,7 @@ function DateRange({
                             }}
                             onError={onDateErrorEvent?.endDate}
                             onFocus={onDateFocusEvent?.endDate}
+                            readOnly={readOnly}
                             value={endDate}
                           />
                         </Box>