feat: add new pickerAppearance option 'monthOnly'

docs/fields/date.mdx

@@ -38,8 +38,8 @@ In addition to the default [field admin config](/docs/fields/overview#admin-conf
 
 | Option                 | Description                                                                                                                                         |
 | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`pickerAppearance`** | Determines the appearance of the datepicker: `dayAndTime` `timeOnly` `dayOnly`. Defaults to `dayAndTime`.                                           |
-| **`displayFormat`**    | Determines how the date is presented. dayAndTime default to `MMM d, yyy h:mm a` timeOnly defaults to `h:mm a` and dayOnly defaults to `MMM d, yyy`. |
+| **`pickerAppearance`** | Determines the appearance of the datepicker: `dayAndTime` `timeOnly` `dayOnly` `monthOnly`. Defaults to `dayAndTime`.                                           |
+| **`displayFormat`**    | Determines how the date is presented. dayAndTime default to `MMM d, yyy h:mm a` timeOnly defaults to `h:mm a` dayOnly defaults to `MMM d, yyy` and monthOnly defaults to `MM/yyyy`. |
 | **`placeholder`**      | Placeholder text for the field.                                                                                                                     |
 | **`monthsToShow`**     | Number of months to display max is 2. Defaults to 1.                                                                                                |
 | **`minDate`**          | Passed directly to [react-datepicker](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md).                               |

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

test/fields/collections/Date/index.ts

@@ -0,0 +1,63 @@
+import type { CollectionConfig } from '../../../../src/collections/config/types';
+
+export const defaultText = 'default-text';
+
+const DateFields: CollectionConfig = {
+  slug: 'date-fields',
+  admin: {
+    useAsTitle: 'date',
+  },
+  fields: [
+    {
+      name: 'default',
+      type: 'date',
+      required: true,
+    },
+    {
+      name: 'timeOnly',
+      type: 'date',
+      admin: {
+        date: {
+          pickerAppearance: 'timeOnly',
+        },
+      },
+    },
+    {
+      name: 'dayOnly',
+      type: 'date',
+      admin: {
+        date: {
+          pickerAppearance: 'dayOnly',
+        },
+      },
+    },
+    {
+      name: 'dayAndTime',
+      type: 'date',
+      admin: {
+        date: {
+          pickerAppearance: 'dayAndTime',
+        },
+      },
+    },
+    {
+      name: 'monthOnly',
+      type: 'date',
+      admin: {
+        date: {
+          pickerAppearance: 'monthOnly',
+        },
+      },
+    },
+  ],
+};
+
+export const dateDoc = {
+  default: '2022-08-12T10:00:00.000+00:00',
+  timeOnly: '2022-08-12T10:00:00.157+00:00',
+  dayOnly: '2022-08-11T22:00:00.000+00:00',
+  dayAndTime: '2022-08-12T10:00:00.052+00:00',
+  monthOnly: '2022-07-31T22:00:00.000+00:00',
+};
+
+export default DateFields;

test/fields/config.ts

@@ -6,6 +6,7 @@ import ArrayFields, { arrayDoc } from './collections/Array';
 import BlockFields, { blocksDoc } from './collections/Blocks';
 import CollapsibleFields, { collapsibleDoc } from './collections/Collapsible';
 import ConditionalLogic, { conditionalLogicDoc } from './collections/ConditionalLogic';
+import DateFields, { dateDoc } from './collections/Date';
 import RichTextFields, { richTextDoc } from './collections/RichText';
 import SelectFields, { selectsDoc } from './collections/Select';
 import TabsFields, { tabsDoc } from './collections/Tabs';
@@ -44,6 +45,7 @@ export default buildConfig({
     NumberFields,
     Uploads,
     IndexedFields,
+    DateFields,
   ],
   localization: {
     defaultLocale: 'en',
@@ -66,6 +68,7 @@ export default buildConfig({
     await payload.create({ collection: 'select-fields', data: selectsDoc });
     await payload.create({ collection: 'tabs-fields', data: tabsDoc });
     await payload.create({ collection: 'point-fields', data: pointDoc });
+    await payload.create({ collection: 'date-fields', data: dateDoc });
 
     const createdTextDoc = await payload.create({ collection: 'text-fields', data: textDoc });
 

test/fields/payload-types.ts

@@ -295,6 +295,20 @@ export interface IndexedField {
   createdAt: string;
   updatedAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "date-fields".
+ */
+export interface DateField {
+  id: string;
+  default: string;
+  timeOnly?: string;
+  dayOnly?: string;
+  dayAndTime?: string;
+  monthOnly?: string;
+  createdAt: string;
+  updatedAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".