fix: adding disabled state for datepicker, resolves #180

src/components/Datepicker/DatepickerRangeInput.spec.tsx

@@ -38,6 +38,15 @@ describe('DatepickerRangeInput', () => {
         expect(render(<DatepickerRangeInput />).container).toMatchSnapshot();
     });
 
+    it('can be disabled', () => {
+        const { getAllByRole } = render(<DatepickerRangeInput disabled />);
+        const inputs = getAllByRole('textbox');
+        expect(inputs).toHaveLength(2);
+        inputs.forEach(input => {
+            expect(input).toBeDisabled();
+        });
+    });
+
     describe('should call onClose function', () => {
         it('when clicking outside', async () => {
             const mockCloseHandler = jest.fn();

src/components/Datepicker/DatepickerRangeInput.tsx

@@ -168,6 +168,10 @@ interface DatepickerRangeInputProps extends MarginProps, WidthProps {
      * @default 'normal'
      */
     variant?: 'compact' | 'normal';
+    /**
+     * Determines whether the datePicker is disabled or not
+     */
+    disabled?: boolean;
 }
 
 interface DateRangeInputText {
@@ -217,6 +221,7 @@ const DatepickerRangeInput: FC<DatepickerRangeInputProps> = ({
     startInputId,
     endInputId,
     variant = 'normal',
+    disabled,
     ...rest
 }: DatepickerRangeInputProps) => {
     const localeObject = useLocaleObject(locale);
@@ -350,6 +355,7 @@ const DatepickerRangeInput: FC<DatepickerRangeInputProps> = ({
                             width="100%"
                             onChange={handleStartDateInputChange}
                             data-error={error.startDate}
+                            disabled={disabled}
                         />
                         {focusedInput === START_DATE && <StartDateFocusedBlock />}
                         <DateArrow color={Colors.AUTHENTIC_BLUE_550} />
@@ -367,6 +373,7 @@ const DatepickerRangeInput: FC<DatepickerRangeInputProps> = ({
                             onChange={handleEndDateInputChange}
                             width="100%"
                             data-error={error.endDate}
+                            disabled={disabled}
                         />
                         {focusedInput === END_DATE && <EndDateFocusedBlock />}
                     </DateRangeWrapper>

src/components/Datepicker/DatepickerSingleInput.spec.tsx

@@ -20,6 +20,12 @@ describe('DatepickerSingleInput', () => {
         expect(render(<DatepickerSingleInput />).container).toMatchSnapshot();
     });
 
+    it('can be disabled', () => {
+        const { getByRole } = render(<DatepickerSingleInput disabled />);
+        const input = getByRole('textbox');
+        expect(input).toBeDisabled();
+    });
+
     describe('should call onClose function', () => {
         it('when clicking outside', async () => {
             const mockCloseHandler = jest.fn();

src/components/Datepicker/DatepickerSingleInput.tsx

@@ -71,6 +71,10 @@ interface DatepickerSingleInputProps extends MarginProps, WidthProps {
      * The id to be assigned to the input field
      */
     inputId?: string;
+    /**
+     * Determines whether the datePicker is disabled or not
+     */
+    disabled?: boolean;
 }
 
 const DatepickerSingleInput: FC<DatepickerSingleInputProps> = ({
@@ -87,6 +91,7 @@ const DatepickerSingleInput: FC<DatepickerSingleInputProps> = ({
     value,
     errorHandler,
     inputId,
+    disabled,
     ...rest
 }: DatepickerSingleInputProps) => {
     const localeObject = useLocaleObject(locale);
@@ -174,6 +179,7 @@ const DatepickerSingleInput: FC<DatepickerSingleInputProps> = ({
                         onBlur={handleDatepickerClose}
                         onChange={handleDateTextChange}
                         data-error={error}
+                        disabled={disabled}
                         {...rest}
                     />
                     {displayErrorMessage && error && !isFocused && (