feat: add DateSelector dateFormat prop

Author: lpsinger

src/components/forms/DatePicker/DatePicker.tsx

@@ -12,6 +12,7 @@ import {
   DEFAULT_EXTERNAL_DATE_FORMAT,
   VALIDATION_MESSAGE,
   DEFAULT_MIN_DATE,
+  type DateFormat,
 } from './constants'
 import { DatePickerLocalization, EN_US } from './i18n'
 import {
@@ -33,6 +34,7 @@ type BaseDatePickerProps = {
   validationStatus?: ValidationStatus
   disabled?: boolean
   required?: boolean
+  dateFormat?: DateFormat
   defaultValue?: string
   minDate?: string
   maxDate?: string
@@ -57,6 +59,7 @@ export const DatePicker = ({
   name,
   className,
   validationStatus,
+  dateFormat = DEFAULT_EXTERNAL_DATE_FORMAT,
   defaultValue,
   disabled,
   required,
@@ -68,6 +71,8 @@ export const DatePicker = ({
   i18n = EN_US,
   ...inputProps
 }: DatePickerProps): React.ReactElement => {
+  dateFormat ??= DEFAULT_EXTERNAL_DATE_FORMAT
+
   const datePickerEl = useRef<HTMLDivElement>(null)
   const externalInputEl = useRef<HTMLInputElement>(null)
 
@@ -108,8 +113,7 @@ export const DatePicker = ({
 
   const handleSelectDate = (dateString: string, closeCalendar = true): void => {
     const parsedValue = parseDateString(dateString)
-    const formattedValue =
-      parsedValue && formatDate(parsedValue, DEFAULT_EXTERNAL_DATE_FORMAT)
+    const formattedValue = parsedValue && formatDate(parsedValue, dateFormat)
 
     if (parsedValue) setInternalValue(dateString)
     if (formattedValue) setExternalValue(formattedValue)
@@ -128,7 +132,7 @@ export const DatePicker = ({
     setExternalValue(value)
     if (onChange) onChange(value)
 
-    const inputDate = parseDateString(value, DEFAULT_EXTERNAL_DATE_FORMAT, true)
+    const inputDate = parseDateString(value, dateFormat, true)
     let newValue = ''
     if (inputDate && !isDateInvalid(value, parsedMinDate, parsedMaxDate)) {
       newValue = formatDate(inputDate)
@@ -179,11 +183,7 @@ export const DatePicker = ({
       setStatuses([])
     } else {
       // calendar is closed, show it
-      const inputDate = parseDateString(
-        externalValue,
-        DEFAULT_EXTERNAL_DATE_FORMAT,
-        true
-      )
+      const inputDate = parseDateString(externalValue, dateFormat, true)
 
       const displayDate = keepDateBetweenMinAndMax(
         inputDate || (defaultValue && parseDateString(defaultValue)) || today(),
@@ -347,5 +347,6 @@ export const DatePicker = ({
 }
 
 DatePicker.defaultProps = {
+  dateFormat: DEFAULT_EXTERNAL_DATE_FORMAT,
   minDate: DEFAULT_MIN_DATE,
 }

src/components/forms/DatePicker/constants.ts

@@ -34,3 +34,6 @@ export const YEAR_CHUNK = 12
 export const DEFAULT_MIN_DATE = '0000-01-01'
 export const DEFAULT_EXTERNAL_DATE_FORMAT = 'MM/DD/YYYY'
 export const INTERNAL_DATE_FORMAT = 'YYYY-MM-DD'
+export type DateFormat =
+  | typeof INTERNAL_DATE_FORMAT
+  | typeof DEFAULT_EXTERNAL_DATE_FORMAT

src/components/forms/DatePicker/utils.tsx

@@ -1,6 +1,10 @@
 import React, { KeyboardEvent } from 'react'
 
-import { DEFAULT_EXTERNAL_DATE_FORMAT, INTERNAL_DATE_FORMAT } from './constants'
+import {
+  type DateFormat,
+  DEFAULT_EXTERNAL_DATE_FORMAT,
+  INTERNAL_DATE_FORMAT,
+} from './constants'
 
 /**
  * This file contains the USWDS DatePicker date manipulation functions converted to TypeScript
@@ -355,13 +359,13 @@ export const isDatesYearOutsideMinOrMax = (
  * Parse a date with format M-D-YY
  *
  * @param {string} dateString the date string to parse
- * @param {string} dateFormat the format of the date string
+ * @param {DateFormat} dateFormat the format of the date string
  * @param {boolean} adjustDate should the date be adjusted
  * @returns {Date} the parsed date
  */
 export const parseDateString = (
   dateString: string,
-  dateFormat: string = INTERNAL_DATE_FORMAT,
+  dateFormat: DateFormat = INTERNAL_DATE_FORMAT,
   adjustDate = false
 ): Date | undefined => {
   let date
@@ -430,12 +434,12 @@ export const parseDateString = (
  * Format a date to format YYYY-MM-DD
  *
  * @param {Date} date the date to format
- * @param {string} dateFormat the format of the date string
+ * @param {DateFormat} dateFormat the format of the date string
  * @returns {string} the formatted date string
  */
 export const formatDate = (
   date: Date,
-  dateFormat: string = INTERNAL_DATE_FORMAT
+  dateFormat: DateFormat = INTERNAL_DATE_FORMAT
 ): string => {
   const padZeros = (value: number, length: number): string => {
     return `0000${value}`.slice(-length)