Added custom input id props to DateSingleInput and DateRangeInput

README.md

@@ -17,7 +17,6 @@
 Simple. Use
 [React hooks (@datepicker-react/hooks)](https://github.com/tresko/react-datepicker/tree/master/packages/hooks).
 
-
 ## Live Playground
 
 For examples of the datepicker in action, go to https://react-datepicker.netlify.com/.
@@ -118,6 +117,8 @@ dayLabelFormat?(date: Date): string
 weekdayLabelFormat?(date: Date): string
 monthLabelFormat?(date: Date): string
 onDayRender?(date: Date): React.ReactNode
+startDateInputId?: string
+endDateInputId?: string
 ```
 
 ### Datepicker
@@ -250,6 +251,7 @@ dayLabelFormat?(date: Date): string
 weekdayLabelFormat?(date: Date): string
 monthLabelFormat?(date: Date): string
 onDayRender?(date: Date): React.ReactNode
+inputId?: string
 ```
 
 ### Theming

packages/styled/README.md

@@ -112,6 +112,8 @@ dayLabelFormat?(date: Date): string
 weekdayLabelFormat?(date: Date): string
 monthLabelFormat?(date: Date): string
 onDayRender?(date: Date): React.ReactNode
+startDateInputId?: string
+endDateInputId?: string
 ```
 
 ### Datepicker
@@ -244,6 +246,7 @@ dayLabelFormat?(date: Date): string
 weekdayLabelFormat?(date: Date): string
 monthLabelFormat?(date: Date): string
 onDayRender?(date: Date): React.ReactNode
+inputId?: string
 ```
 
 ### Theming

packages/styled/src/components/DateRangeInput/DateRangeInput.test.tsx

@@ -402,3 +402,22 @@ test('should use dateRangeGridTemplateRows from theme', () => {
   // @ts-ignore
   expect(grid2).toHaveStyleRule('grid-template-rows', '4fr 5fr 6fr')
 })
+
+test('should handle custom id for input fields', () => {
+  const onDatesChange = jest.fn()
+  const onFocusChange = jest.fn()
+  const {container, getAllByTestId} = render(
+    <Datepicker
+      onFocusChange={onFocusChange}
+      startDate={null}
+      endDate={null}
+      focusedInput={START_DATE}
+      onDatesChange={onDatesChange}
+      startDateInputId="customStartDateId"
+      endDateInputId="customEndDateId"
+    />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(getAllByTestId('DatepickerInput')[0].id).toEqual('customStartDateId')
+  expect(getAllByTestId('DatepickerInput')[1].id).toEqual('customEndDateId')
+})

packages/styled/src/components/DateRangeInput/DateRangeInput.tsx

@@ -122,6 +122,8 @@ export interface DateRangeInputProps extends UseDatepickerProps {
   weekdayLabelFormat?(date: Date): string
   monthLabelFormat?(date: Date): string
   onDayRender?(date: Date): React.ReactNode
+  startDateInputId?: string
+  endDateInputId?: string
 }
 
 function DateRangeInput({
@@ -152,6 +154,8 @@ function DateRangeInput({
   displayFormat = 'MM/dd/yyyy',
   phrases = dateRangeInputPhrases,
   placement = 'bottom',
+  startDateInputId = 'startDate',
+  endDateInputId = 'endDate',
 }: DateRangeInputProps) {
   const ref = useRef(null)
   const datepickerWrapperRef = useRef<HTMLDivElement>(null)
@@ -219,7 +223,7 @@ function DateRangeInput({
           borderRadius={theme.dateRangeBorderRadius}
         >
           <Input
-            id="startDate"
+            id={startDateInputId}
             ariaLabel={phrases.startDateAriaLabel}
             placeholder={phrases.startDatePlaceholder}
             value={getInputValue(startDate, displayFormat, '')}
@@ -245,7 +249,7 @@ function DateRangeInput({
             />
           </Flex>
           <Input
-            id="endDate"
+            id={endDateInputId}
             ariaLabel={phrases.endDateAriaLabel}
             placeholder={phrases.endDatePlaceholder}
             value={getInputValue(endDate, displayFormat, '')}