fix: DatePicker showing only selected day by default (#3169)

Author: JarrodMFlesch

src/admin/components/elements/DatePicker/DatePicker.tsx

@@ -16,8 +16,8 @@ const DateTime: React.FC<Props> = (props) => {
   const {
     value,
     onChange,
-    displayFormat,
-    pickerAppearance = "dayOnly",
+    displayFormat: customDisplayFormat,
+    pickerAppearance = 'default',
     minDate,
     maxDate,
     monthsToShow = 1,
@@ -39,20 +39,21 @@ const DateTime: React.FC<Props> = (props) => {
     console.warn(`Could not find DatePicker locale for ${locale}`);
   }
 
-  let dateTimeFormat = displayFormat;
+  let dateFormat = customDisplayFormat;
 
-  if (dateTimeFormat === undefined && pickerAppearance) {
-    if (pickerAppearance === 'dayAndTime') dateTimeFormat = 'MMM d, yyy h:mm a';
-    else if (pickerAppearance === 'timeOnly') dateTimeFormat = 'h:mm a';
-    else if (pickerAppearance === 'dayOnly') dateTimeFormat = 'dd';
-    else if (pickerAppearance === 'monthOnly') dateTimeFormat = 'MMMM';
-    else dateTimeFormat = 'MMM d, yyy';
+  if (!customDisplayFormat) {
+    // when no displayFormat is provided, determine format based on the picker appearance
+    if (pickerAppearance === 'default') dateFormat = 'MM/dd/yyyy';
+    else if (pickerAppearance === 'dayAndTime') dateFormat = 'MMM d, yyy h:mm a';
+    else if (pickerAppearance === 'timeOnly') dateFormat = 'h:mm a';
+    else if (pickerAppearance === 'dayOnly') dateFormat = 'MMM dd';
+    else if (pickerAppearance === 'monthOnly') dateFormat = 'MMMM';
   }
 
   const dateTimePickerProps = {
     minDate,
     maxDate,
-    dateFormat: dateTimeFormat,
+    dateFormat,
     monthsShown: Math.min(2, monthsToShow),
     showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',
     minTime,

src/admin/components/elements/DatePicker/types.ts

@@ -1,6 +1,6 @@
 type SharedProps = {
   displayFormat?: string
-  pickerAppearance?: 'dayAndTime' | 'timeOnly' | 'dayOnly' | 'monthOnly'
+  pickerAppearance?: 'default' | 'dayAndTime' | 'timeOnly' | 'dayOnly' | 'monthOnly'
 }
 
 type TimePickerProps = {
@@ -22,6 +22,9 @@ type MonthPickerProps = {
 }
 
 export type ConditionalDateProps =
+  | SharedProps & {
+    pickerAppearance?: 'default'
+  }
   | SharedProps & DayPickerProps & TimePickerProps & {
     pickerAppearance?: 'dayAndTime'
   }