feat: add new pickerAppearance option 'monthOnly'

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

@@ -31,6 +31,7 @@ const DateTime: React.FC<Props> = (props) => {
   if (dateTimeFormat === undefined) {
     if (pickerAppearance === 'dayAndTime') dateTimeFormat = 'MMM d, yyy h:mm a';
     else if (pickerAppearance === 'timeOnly') dateTimeFormat = 'h:mm a';
+    else if (pickerAppearance === 'monthOnly') dateTimeFormat = 'MM/yyyy';
     else dateTimeFormat = 'MMM d, yyy';
   }
 
@@ -50,6 +51,7 @@ const DateTime: React.FC<Props> = (props) => {
     showPopperArrow: false,
     selected: value && new Date(value),
     customInputRef: 'ref',
+    showMonthYearPicker: pickerAppearance === 'monthOnly',
   };
 
   const classes = [

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

@@ -1,6 +1,6 @@
 type SharedProps = {
-  displayFormat?: string | undefined
-  pickerAppearance?: 'dayAndTime' | 'timeOnly' | 'dayOnly'
+  displayFormat?: string
+  pickerAppearance?: 'dayAndTime' | 'timeOnly' | 'dayOnly' | 'monthOnly'
 }
 
 type TimePickerProps = {
@@ -16,6 +16,11 @@ type DayPickerProps = {
   maxDate?: Date
 }
 
+type MonthPickerProps = {
+  minDate?: Date
+  maxDate?: Date
+}
+
 export type ConditionalDateProps =
   | SharedProps & DayPickerProps & TimePickerProps & {
     pickerAppearance?: 'dayAndTime'
@@ -26,6 +31,9 @@ export type ConditionalDateProps =
   | SharedProps & DayPickerProps & {
     pickerAppearance: 'dayOnly'
   }
+  | SharedProps & MonthPickerProps & {
+    pickerAppearance: 'monthOnly'
+  }
 
 export type Props = SharedProps & DayPickerProps & TimePickerProps & {
   value?: Date