From 161a931f897edc38b1eb6aff22f36e5eb75c4388 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Tue, 23 May 2023 09:01:48 -0700
Subject: [PATCH] fix: Adds validation styles to datepicker (#2398)

Co-authored-by: Brandon Lenz <brandon@truss.works>
---
 .../forms/DatePicker/DatePicker.stories.tsx   |  17 +-
 .../forms/DatePicker/DatePicker.test.tsx      | 207 +++++++-----------
 .../forms/DatePicker/DatePicker.tsx           |  15 +-
 3 files changed, 112 insertions(+), 127 deletions(-)

diff --git a/src/components/forms/DatePicker/DatePicker.stories.tsx b/src/components/forms/DatePicker/DatePicker.stories.tsx
index 5643418de8..96f15e908f 100644
--- a/src/components/forms/DatePicker/DatePicker.stories.tsx
+++ b/src/components/forms/DatePicker/DatePicker.stories.tsx
@@ -13,6 +13,13 @@ export default {
   argTypes: {
     onSubmit: { action: 'submitted' },
     disabled: { control: { type: 'boolean' } },
+    validationStatus: { 
+      control: {
+        type: 'select',
+        options: [undefined, 'success', 'error'],
+      },
+    defaultValue: undefined,
+   } 
   },
   parameters: {
     docs: {
@@ -45,14 +52,15 @@ We may find that we want to expose props for custom event handlers or even a ref
 type StorybookArguments = {
   onSubmit: React.FormEventHandler<HTMLFormElement>
   disabled?: boolean
+  validationStatus: 'success' | 'error' | undefined
 }
 
 export const completeDatePicker = (
   argTypes: StorybookArguments
 ): React.ReactElement => (
   <Form onSubmit={argTypes.onSubmit}>
-    <FormGroup>
-      <Label id="appointment-date-label" htmlFor="appointment-date">
+    <FormGroup error={argTypes.validationStatus === 'error'}>
+      <Label id="appointment-date-label" htmlFor="appointment-date" error={argTypes.validationStatus === 'error'}>
         Appointment date
       </Label>
       <div className="usa-hint" id="appointment-date-hint">
@@ -64,10 +72,11 @@ export const completeDatePicker = (
         aria-describedby="appointment-date-hint"
         aria-labelledby="appointment-date-label"
         disabled={argTypes.disabled}
+        validationStatus={argTypes.validationStatus}
       />
-      <Label htmlFor="otherInput">Another unrelated input</Label>
-      <TextInput id="otherInput" name="otherInput" type="text" />
     </FormGroup>
+    <Label htmlFor="otherInput">Another unrelated input</Label>
+    <TextInput id="otherInput" name="otherInput" type="tel" />
   </Form>
 )
 
diff --git a/src/components/forms/DatePicker/DatePicker.test.tsx b/src/components/forms/DatePicker/DatePicker.test.tsx
index 51ecf5e0be..047cacaa83 100644
--- a/src/components/forms/DatePicker/DatePicker.test.tsx
+++ b/src/components/forms/DatePicker/DatePicker.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import { render, fireEvent, createEvent, waitFor } from '@testing-library/react'
+import React, { ComponentProps } from 'react'
+import { render, fireEvent, createEvent, waitFor, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { DatePicker } from './DatePicker'
@@ -21,13 +21,30 @@ describe('DatePicker component', () => {
     name: 'birthdate',
   }
 
-  it('renders witout errors', () => {
-    const { getByTestId } = render(<DatePicker {...testProps} />)
-    expect(getByTestId('date-picker')).toBeInTheDocument()
+  const renderDatePicker = (
+    props?: Omit<ComponentProps<typeof DatePicker>, 'id' | 'name'>
+  ) => {
+    const allProps = {
+      ...testProps,
+      ...props
+    }
+    const rendered = render(<DatePicker {...allProps} />)
+    const queryForDatePicker = () => screen.queryByTestId('date-picker')
+    return {
+      ...rendered,
+      queryForDatePicker,
+    }
+  }
+
+  it('renders without errors', () => {
+    const { queryForDatePicker } = renderDatePicker()
+    const datePicker = queryForDatePicker()
+    expect(datePicker).toBeInTheDocument()
+    expect(datePicker).toHaveClass('usa-date-picker')
   })
 
   it('renders a hidden "internal" input with the name prop', () => {
-    const { getByTestId } = render(<DatePicker {...testProps} />)
+    const { getByTestId } = renderDatePicker()
     expect(getByTestId('date-picker-internal-input')).toBeInstanceOf(
       HTMLInputElement
     )
@@ -46,7 +63,7 @@ describe('DatePicker component', () => {
   })
 
   it('renders a visible "external" input with the id prop', () => {
-    const { getByTestId } = render(<DatePicker {...testProps} />)
+    const { getByTestId } = renderDatePicker()
     expect(getByTestId('date-picker-external-input')).toBeInstanceOf(
       HTMLInputElement
     )
@@ -62,7 +79,7 @@ describe('DatePicker component', () => {
   })
 
   it('renders a toggle button', () => {
-    const { getByTestId } = render(<DatePicker {...testProps} />)
+    const { getByTestId } = renderDatePicker()
     expect(getByTestId('date-picker-button')).toBeInstanceOf(HTMLButtonElement)
     expect(getByTestId('date-picker-button')).toHaveAttribute(
       'aria-label',
@@ -71,7 +88,7 @@ describe('DatePicker component', () => {
   })
 
   it('renders a hidden calendar dialog element', () => {
-    const { getByTestId } = render(<DatePicker {...testProps} />)
+    const { getByTestId } = renderDatePicker()
     expect(getByTestId('date-picker-calendar')).toBeInstanceOf(HTMLDivElement)
     expect(getByTestId('date-picker-calendar')).toHaveAttribute(
       'role',
@@ -81,7 +98,7 @@ describe('DatePicker component', () => {
   })
 
   it('renders a screen reader status element', () => {
-    const { getByTestId } = render(<DatePicker {...testProps} />)
+    const { getByTestId } = renderDatePicker()
     expect(getByTestId('date-picker-status')).toBeInstanceOf(HTMLDivElement)
     expect(getByTestId('date-picker-status')).toHaveAttribute('role', 'status')
     expect(getByTestId('date-picker-status')).toHaveTextContent('')
@@ -89,9 +106,7 @@ describe('DatePicker component', () => {
 
   // https://github.com/uswds/uswds/blob/develop/spec/unit/date-picker/date-picker.spec.js#L933
   it('prevents default action if keyup doesn’t originate within the calendar', async () => {
-    const { getByTestId } = render(
-      <DatePicker {...testProps} defaultValue="2021-01-20" />
-    )
+    const { getByTestId } = renderDatePicker({defaultValue: "2021-01-20"})
 
     const calendarEl = getByTestId('date-picker-calendar')
     await userEvent.click(getByTestId('date-picker-button'))
@@ -108,7 +123,7 @@ describe('DatePicker component', () => {
 
   describe('toggling the calendar', () => {
     it('the calendar is hidden on mount', () => {
-      const { getByTestId } = render(<DatePicker {...testProps} />)
+      const { getByTestId } = renderDatePicker()
       expect(getByTestId('date-picker-calendar')).not.toBeVisible()
       expect(getByTestId('date-picker')).not.toHaveClass(
         'usa-date-picker--active'
@@ -116,9 +131,7 @@ describe('DatePicker component', () => {
     })
 
     it('shows the calendar when the toggle button is clicked and focuses on the selected date', async () => {
-      const { getByTestId, getByText } = render(
-        <DatePicker {...testProps} defaultValue="2021-01-20" />
-      )
+      const { getByTestId, getByText } = renderDatePicker({defaultValue: "2021-01-20"})
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByTestId('date-picker-calendar')).toBeVisible()
       expect(getByTestId('date-picker')).toHaveClass('usa-date-picker--active')
@@ -132,7 +145,7 @@ describe('DatePicker component', () => {
     })
 
     it('hides the calendar when the escape key is pressed', async () => {
-      const { getByTestId } = render(<DatePicker {...testProps} />)
+      const { getByTestId } = renderDatePicker()
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByTestId('date-picker-calendar')).toBeVisible()
       expect(getByTestId('date-picker')).toHaveClass('usa-date-picker--active')
@@ -150,7 +163,7 @@ describe('DatePicker component', () => {
     })
 
     it('hides the calendar when the toggle button is clicked a second time', async () => {
-      const { getByTestId } = render(<DatePicker {...testProps} />)
+      const { getByTestId } = renderDatePicker()
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByTestId('date-picker-calendar')).toBeVisible()
       expect(getByTestId('date-picker')).toHaveClass('usa-date-picker--active')
@@ -168,9 +181,7 @@ describe('DatePicker component', () => {
         MONTH_LABELS[todayDate.getMonth()]
       } ${todayDate.getFullYear()} ${DAY_OF_WEEK_LABELS[todayDate.getDay()]}`
 
-      const { getByTestId, getByLabelText } = render(
-        <DatePicker {...testProps} />
-      )
+      const { getByTestId, getByLabelText } = renderDatePicker()
       await userEvent.click(getByTestId('date-picker-button'))
       await waitFor(() => {
         expect(getByLabelText(todayLabel)).toHaveFocus()
@@ -178,9 +189,7 @@ describe('DatePicker component', () => {
     })
 
     it('adds Selected date to the status text if the selected date and the focused date are the same', async () => {
-      const { getByTestId, getByText } = render(
-        <DatePicker {...testProps} defaultValue="2021-01-20" />
-      )
+      const { getByTestId, getByText } = renderDatePicker({defaultValue: "2021-01-20"})
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByTestId('date-picker-calendar')).toBeVisible()
       expect(getByTestId('date-picker')).toHaveClass('usa-date-picker--active')
@@ -195,14 +204,11 @@ describe('DatePicker component', () => {
     })
 
     it('coerces the display date to a valid value', async () => {
-      const { getByTestId, getByLabelText } = render(
-        <DatePicker
-          {...testProps}
-          defaultValue="2021-01-06"
-          minDate="2021-01-10"
-          maxDate="2021-01-20"
-        />
-      )
+      const { getByTestId, getByLabelText } = renderDatePicker({
+        defaultValue: "2021-01-06",
+        minDate: "2021-01-10",
+        maxDate: "2021-01-20",
+      })
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByLabelText('6 January 2021 Wednesday')).not.toHaveFocus()
 
@@ -230,9 +236,7 @@ describe('DatePicker component', () => {
 
   describe('status text', () => {
     it('shows instructions in the status text when the calendar is opened', async () => {
-      const { getByTestId } = render(
-        <DatePicker {...testProps} defaultValue="2021-01-20" />
-      )
+      const { getByTestId } = renderDatePicker({defaultValue: "2021-01-20"})
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByTestId('date-picker-calendar')).toBeVisible()
       expect(getByTestId('date-picker')).toHaveClass('usa-date-picker--active')
@@ -255,9 +259,7 @@ describe('DatePicker component', () => {
     })
 
     it('removes instructions from the status text when the calendar is already open and the displayed date changes', async () => {
-      const { getByTestId, getByLabelText } = render(
-        <DatePicker {...testProps} defaultValue="2021-01-20" />
-      )
+      const { getByTestId, getByLabelText } = renderDatePicker({defaultValue: "2021-01-20"})
 
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByTestId('date-picker-calendar')).toBeVisible()
@@ -310,9 +312,7 @@ describe('DatePicker component', () => {
     })
 
     it('does not add Selected date to the status text if the selected date and the focused date are not the same', async () => {
-      const { getByTestId, getByLabelText } = render(
-        <DatePicker {...testProps} defaultValue="2021-01-20" />
-      )
+      const { getByTestId, getByLabelText } = renderDatePicker({defaultValue: "2021-01-20"})
 
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByTestId('date-picker-calendar')).toBeVisible()
@@ -343,7 +343,7 @@ describe('DatePicker component', () => {
 
   describe('with the required prop', () => {
     it('the external input is required, and the internal input is not required', () => {
-      const { getByTestId } = render(<DatePicker {...testProps} required />)
+      const { getByTestId } = renderDatePicker({required: true})
       expect(getByTestId('date-picker-external-input')).toBeRequired()
       expect(getByTestId('date-picker-internal-input')).not.toBeRequired()
     })
@@ -351,14 +351,14 @@ describe('DatePicker component', () => {
 
   describe('with the disabled prop', () => {
     it('the toggle button and external inputs are disabled, and the internal input is not disabled', () => {
-      const { getByTestId } = render(<DatePicker {...testProps} disabled />)
+      const { getByTestId } = renderDatePicker({disabled: true})
       expect(getByTestId('date-picker-button')).toBeDisabled()
       expect(getByTestId('date-picker-external-input')).toBeDisabled()
       expect(getByTestId('date-picker-internal-input')).not.toBeDisabled()
     })
 
     it('does not show the calendar when the toggle button is clicked', async () => {
-      const { getByTestId } = render(<DatePicker {...testProps} disabled />)
+      const { getByTestId } = renderDatePicker({disabled: true})
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByTestId('date-picker-calendar')).not.toBeVisible()
       expect(getByTestId('date-picker')).not.toHaveClass(
@@ -369,9 +369,7 @@ describe('DatePicker component', () => {
 
   describe('with a default value prop', () => {
     it('the internal input value is the date string, and the external input value is the formatted date', () => {
-      const { getByTestId } = render(
-        <DatePicker {...testProps} defaultValue="1988-05-16" />
-      )
+      const { getByTestId } = renderDatePicker({defaultValue: "1988-05-16"})
       expect(getByTestId('date-picker-external-input')).toHaveValue(
         '05/16/1988'
       )
@@ -381,20 +379,12 @@ describe('DatePicker component', () => {
     })
 
     it('validates a valid default value', () => {
-      const { getByTestId } = render(
-        <DatePicker {...testProps} defaultValue="1988-05-16" />
-      )
+      const { getByTestId } = renderDatePicker({defaultValue: "1988-05-16"})
       expect(getByTestId('date-picker-external-input')).toBeValid()
     })
 
     it('validates an invalid default value', () => {
-      const { getByTestId } = render(
-        <DatePicker
-          {...testProps}
-          defaultValue="1990-01-01"
-          minDate="2020-01-01"
-        />
-      )
+      const { getByTestId } = renderDatePicker({defaultValue: "1990-01-01", minDate: "2020-01-01"})
 
       expect(getByTestId('date-picker-external-input')).toBeInvalid()
     })
@@ -402,22 +392,14 @@ describe('DatePicker component', () => {
 
   describe('with localization props', () => {
     it('displays abbreviated translations for days of the week', async () => {
-      const { getByText, getByTestId } = render(
-        <DatePicker {...testProps} i18n={sampleLocalization} />
-      )
+      const { getByText, getByTestId } = renderDatePicker({i18n: sampleLocalization})
       await userEvent.click(getByTestId('date-picker-button'))
       sampleLocalization.daysOfWeekShort.forEach((translation) => {
         expect(getByText(translation)).toBeInTheDocument()
       })
     })
     it('displays translation for month', async () => {
-      const { getByText, getByTestId } = render(
-        <DatePicker
-          {...testProps}
-          i18n={sampleLocalization}
-          defaultValue="2020-02-01"
-        />
-      )
+      const { getByText, getByTestId } = renderDatePicker({defaultValue: "2020-02-01", i18n: sampleLocalization})
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByText('febrero')).toBeInTheDocument()
     })
@@ -426,13 +408,7 @@ describe('DatePicker component', () => {
   describe('selecting a date', () => {
     it('clicking a date button selects that date and closes the calendar and focuses the external input', async () => {
       const mockOnChange = jest.fn()
-      const { getByTestId, getByText } = render(
-        <DatePicker
-          {...testProps}
-          defaultValue="2021-01-20"
-          onChange={mockOnChange}
-        />
-      )
+      const { getByText, getByTestId } = renderDatePicker({defaultValue: "2021-01-20", onChange: mockOnChange})
       await userEvent.click(getByTestId('date-picker-button'))
       const dateButton = getByText('15')
       expect(dateButton).toHaveClass('usa-date-picker__calendar__date')
@@ -449,7 +425,7 @@ describe('DatePicker component', () => {
     })
 
     it('selecting a date and opening the calendar focuses on the selected date', async () => {
-      const { getByTestId, getByText } = render(<DatePicker {...testProps} />)
+      const { getByTestId, getByText } = renderDatePicker()
 
       // open calendar
       await userEvent.click(getByTestId('date-picker-button'))
@@ -473,9 +449,7 @@ describe('DatePicker component', () => {
   describe('typing in a date', () => {
     it('typing a date in the external input updates the selected date', async () => {
       const mockOnChange = jest.fn()
-      const { getByTestId, getByText } = render(
-        <DatePicker {...testProps} onChange={mockOnChange} />
-      )
+      const { getByTestId, getByText } = renderDatePicker({onChange: mockOnChange})
       await userEvent.type(
         getByTestId('date-picker-external-input'),
         '05/16/1988'
@@ -493,9 +467,7 @@ describe('DatePicker component', () => {
     })
 
     it('typing a date with a 2-digit year in the external input focuses that year in the current century', async () => {
-      const { getByTestId, getByLabelText } = render(
-        <DatePicker {...testProps} />
-      )
+      const { getByTestId, getByLabelText } = renderDatePicker()
       await userEvent.type(getByTestId('date-picker-external-input'), '2/29/20')
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByTestId('select-month')).toHaveTextContent('February')
@@ -507,9 +479,7 @@ describe('DatePicker component', () => {
     })
 
     it('typing a date with the calendar open updates the calendar to the entered date', async () => {
-      const { getByTestId, getByText } = render(
-        <DatePicker {...testProps} defaultValue="2021-01-20" />
-      )
+      const { getByTestId, getByText } = renderDatePicker({defaultValue: "2021-01-20"})
       await userEvent.click(getByTestId('date-picker-button'))
       expect(getByTestId('select-month')).toHaveTextContent('January')
       expect(getByTestId('select-year')).toHaveTextContent('2021')
@@ -527,9 +497,7 @@ describe('DatePicker component', () => {
 
     it('implements a custom onBlur handler', async () => {
       const mockOnBlur = jest.fn()
-      const { getByTestId } = render(
-        <DatePicker {...testProps} onBlur={mockOnBlur} />
-      )
+      const { getByTestId } = renderDatePicker({onBlur: mockOnBlur})
 
       await userEvent.type(
         getByTestId('date-picker-external-input'),
@@ -541,9 +509,7 @@ describe('DatePicker component', () => {
 
     // TODO - this is an outstanding difference in behavior from USWDS. Fails because validation happens onChange.
     it.skip('typing in the external input does not validate until blurring', async () => {
-      const { getByTestId } = render(
-        <DatePicker {...testProps} minDate="2021-01-20" maxDate="2021-02-14" />
-      )
+      const { getByTestId } = renderDatePicker({minDate: "2021-01-20", maxDate: "2021-02-14"})
 
       const externalInput = getByTestId('date-picker-external-input')
       expect(externalInput).toBeValid()
@@ -555,9 +521,7 @@ describe('DatePicker component', () => {
 
     // TODO - this can be implemented if the above test case is implemented
     it.skip('pressing the Enter key in the external input validates the date', async () => {
-      const { getByTestId } = render(
-        <DatePicker {...testProps} minDate="2021-01-20" maxDate="2021-02-14" />
-      )
+      const { getByTestId } = renderDatePicker({minDate: "2021-01-20", maxDate: "2021-02-14"})
 
       const externalInput = getByTestId('date-picker-external-input')
       expect(externalInput).toBeValid()
@@ -570,7 +534,7 @@ describe('DatePicker component', () => {
 
   describe('validation', () => {
     it('entering an empty value is valid', async () => {
-      const { getByTestId } = render(<DatePicker {...testProps} />)
+      const { getByTestId } = renderDatePicker()
       const externalInput = getByTestId(
         'date-picker-external-input'
       ) as HTMLInputElement
@@ -583,9 +547,7 @@ describe('DatePicker component', () => {
 
     it('entering a non-date value sets a validation message', async () => {
       const mockOnChange = jest.fn()
-      const { getByTestId } = render(
-        <DatePicker {...testProps} onChange={mockOnChange} />
-      )
+      const { getByTestId } = renderDatePicker({onChange: mockOnChange})
       const externalInput = getByTestId(
         'date-picker-external-input'
       ) as HTMLInputElement
@@ -603,9 +565,7 @@ describe('DatePicker component', () => {
 
     it('entering a non-date value sets a validation message', async () => {
       const mockOnChange = jest.fn()
-      const { getByTestId } = render(
-        <DatePicker {...testProps} onChange={mockOnChange} />
-      )
+      const { getByTestId } = renderDatePicker({onChange: mockOnChange})
       const externalInput = getByTestId(
         'date-picker-external-input'
       ) as HTMLInputElement
@@ -618,9 +578,7 @@ describe('DatePicker component', () => {
 
     it('entering an invalid date sets a validation message and becomes valid when selecting a date in the calendar', async () => {
       const mockOnChange = jest.fn()
-      const { getByTestId, getByLabelText } = render(
-        <DatePicker {...testProps} onChange={mockOnChange} />
-      )
+      const { getByTestId, getByLabelText } = renderDatePicker({onChange: mockOnChange})
       const externalInput = getByTestId(
         'date-picker-external-input'
       ) as HTMLInputElement
@@ -642,14 +600,11 @@ describe('DatePicker component', () => {
 
     it('entering a valid date outside of the min/max date sets a validation message', async () => {
       const mockOnChange = jest.fn()
-      const { getByTestId } = render(
-        <DatePicker
-          {...testProps}
-          minDate="2021-01-20"
-          maxDate="2021-02-14"
-          onChange={mockOnChange}
-        />
-      )
+      const { getByTestId } = renderDatePicker({
+        minDate: "2021-01-20",
+        maxDate: "2021-02-14",
+        onChange: mockOnChange,
+      })
       const externalInput = getByTestId(
         'date-picker-external-input'
       ) as HTMLInputElement
@@ -663,7 +618,7 @@ describe('DatePicker component', () => {
 
   describe('month selection', () => {
     it('clicking the selected month updates the status text', async () => {
-      const { getByTestId } = render(<DatePicker {...testProps} />)
+      const { getByTestId } = renderDatePicker()
       await userEvent.click(getByTestId('date-picker-button'))
       await userEvent.click(getByTestId('select-month'))
       expect(getByTestId('date-picker-status')).toHaveTextContent(
@@ -674,9 +629,7 @@ describe('DatePicker component', () => {
 
   describe('year selection', () => {
     it('clicking the selected year updates the status text', async () => {
-      const { getByTestId } = render(
-        <DatePicker {...testProps} defaultValue="2021-01-20" />
-      )
+      const { getByTestId } = renderDatePicker({defaultValue: "2021-01-20"})
       await userEvent.click(getByTestId('date-picker-button'))
       await userEvent.click(getByTestId('select-year'))
 
@@ -688,9 +641,7 @@ describe('DatePicker component', () => {
     })
 
     it('clicking previous year chunk updates the status text', async () => {
-      const { getByTestId } = render(
-        <DatePicker {...testProps} defaultValue="2021-01-20" />
-      )
+      const { getByTestId } = renderDatePicker({defaultValue: "2021-01-20"})
       await userEvent.click(getByTestId('date-picker-button'))
       await userEvent.click(getByTestId('select-year'))
       await userEvent.click(getByTestId('previous-year-chunk'))
@@ -703,9 +654,7 @@ describe('DatePicker component', () => {
     })
 
     it('clicking next year chunk navigates the year picker forward one chunk', async () => {
-      const { getByTestId } = render(
-        <DatePicker {...testProps} defaultValue="2021-01-20" />
-      )
+      const { getByTestId } = renderDatePicker({defaultValue: "2021-01-20"})
       await userEvent.click(getByTestId('date-picker-button'))
       await userEvent.click(getByTestId('select-year'))
       await userEvent.click(getByTestId('next-year-chunk'))
@@ -717,4 +666,18 @@ describe('DatePicker component', () => {
       })
     })
   })
+
+  describe('validationStatus', () => {
+    it('renders with error styling', () => {
+      const { getByTestId } = renderDatePicker({ validationStatus: 'error' })
+      expect(getByTestId('date-picker-external-input')).toBeInstanceOf(HTMLInputElement)
+      expect(getByTestId('date-picker-external-input')).toHaveClass('usa-input--error')
+    })
+
+    it('renders with success styling', () => {
+      const { getByTestId } = renderDatePicker({ validationStatus: 'success' })
+      expect(getByTestId('date-picker-external-input')).toBeInstanceOf(HTMLInputElement)
+      expect(getByTestId('date-picker-external-input')).toHaveClass('usa-input--success')
+    })
+  })
 })
diff --git a/src/components/forms/DatePicker/DatePicker.tsx b/src/components/forms/DatePicker/DatePicker.tsx
index da0b6a3a35..3101d14142 100644
--- a/src/components/forms/DatePicker/DatePicker.tsx
+++ b/src/components/forms/DatePicker/DatePicker.tsx
@@ -29,6 +29,7 @@ type BaseDatePickerProps = {
   id: string
   name: string
   className?: string
+  validationStatus?: 'error' | 'success'
   disabled?: boolean
   required?: boolean
   defaultValue?: string
@@ -54,6 +55,7 @@ export const DatePicker = ({
   id,
   name,
   className,
+  validationStatus,
   defaultValue,
   disabled,
   required,
@@ -68,6 +70,9 @@ export const DatePicker = ({
   const datePickerEl = useRef<HTMLDivElement>(null)
   const externalInputEl = useRef<HTMLInputElement>(null)
 
+  const isError = validationStatus === 'error'
+  const isSuccess = validationStatus === 'success'
+
   const [internalValue, setInternalValue] = useState('')
   const [externalValue, setExternalValue] = useState('')
   const [showCalendar, setShowCalendar] = useState(false)
@@ -241,6 +246,14 @@ export const DatePicker = ({
     },
     className
   )
+  const datePickerInputClasses = classnames(
+    'usa-input',
+    'usa-date-picker__external-input',
+    {
+      'usa-input--error': isError,
+      'usa-input--success': isSuccess,
+    },
+  )
 
   const toggleCalendar = i18n.toggleCalendar
 
@@ -272,7 +285,7 @@ export const DatePicker = ({
           {...inputProps}
           id={id}
           data-testid="date-picker-external-input"
-          className="usa-input usa-date-picker__external-input"
+          className={datePickerInputClasses}
           type="text"
           disabled={disabled}
           required={required}