diff --git a/src/components/forms/DatePicker/DatePicker.tsx b/src/components/forms/DatePicker/DatePicker.tsx index 8aff890b9a..f2eeff1bbf 100644 --- a/src/components/forms/DatePicker/DatePicker.tsx +++ b/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(null) const externalInputEl = useRef(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, } diff --git a/src/components/forms/DatePicker/constants.ts b/src/components/forms/DatePicker/constants.ts index 3dd7211a54..7ea31ac49f 100644 --- a/src/components/forms/DatePicker/constants.ts +++ b/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 diff --git a/src/components/forms/DatePicker/utils.tsx b/src/components/forms/DatePicker/utils.tsx index 73bdc8f3cf..3f11cf6f14 100644 --- a/src/components/forms/DatePicker/utils.tsx +++ b/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)