diff --git a/app/webpacker/components/Panel/Wrt/EditPerson.jsx b/app/webpacker/components/Panel/Wrt/EditPerson.jsx index dfa2ed2076..2d32eeebdf 100644 --- a/app/webpacker/components/Panel/Wrt/EditPerson.jsx +++ b/app/webpacker/components/Panel/Wrt/EditPerson.jsx @@ -144,6 +144,7 @@ function EditPersonForm({ wcaId, clearWcaId, setResponse }) { name="dob" control={UtcDatePicker} showYearDropdown + dateFormatOverride="YYYY-MM-dd" dropdownMode="select" disabled={!editedUserDetails} isoDate={editedUserDetails?.dob} diff --git a/app/webpacker/components/wca/UtcDatePicker.js b/app/webpacker/components/wca/UtcDatePicker.js index 4c16629780..d18d903bb5 100644 --- a/app/webpacker/components/wca/UtcDatePicker.js +++ b/app/webpacker/components/wca/UtcDatePicker.js @@ -37,6 +37,8 @@ function UtcDatePicker({ isoEndDate = null, isoMinDate = null, isoMaxDate = null, + dateFormatOverride = null, + timeFormatOverride = null, }) { const date = useIsoDate(isoDate); @@ -57,6 +59,14 @@ function UtcDatePicker({ const minDate = useIsoDate(isoMinDate); const maxDate = useIsoDate(isoMaxDate); + const timeFormat = timeFormatOverride || 'p'; + + // weird quirk in the 3rd party datepicker implementation: The "dateFormat" field actually means + // "format for the whole input row, which may or may not include time". The field "timeFormat" + // is only considered for time-specific inputs *within* the dropdown parts of the picker. + const dateOnlyFormat = dateFormatOverride || 'P'; + const dateFormat = showTimeInput ? (dateOnlyFormat + timeFormat) : dateOnlyFormat; + return (