diff --git a/docs/fields/date.mdx b/docs/fields/date.mdx index 7ccf812c1b..54c1858d39 100644 --- a/docs/fields/date.mdx +++ b/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). | diff --git a/src/admin/components/elements/DatePicker/DatePicker.tsx b/src/admin/components/elements/DatePicker/DatePicker.tsx index d45624534c..be0f18d4ac 100644 --- a/src/admin/components/elements/DatePicker/DatePicker.tsx +++ b/src/admin/components/elements/DatePicker/DatePicker.tsx @@ -31,6 +31,7 @@ const DateTime: React.FC = (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) => { showPopperArrow: false, selected: value && new Date(value), customInputRef: 'ref', + showMonthYearPicker: pickerAppearance === 'monthOnly', }; const classes = [ diff --git a/src/admin/components/elements/DatePicker/types.ts b/src/admin/components/elements/DatePicker/types.ts index c7ba02d0f0..13af88cf0e 100644 --- a/src/admin/components/elements/DatePicker/types.ts +++ b/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 diff --git a/test/fields/collections/Date/index.ts b/test/fields/collections/Date/index.ts new file mode 100644 index 0000000000..3d3882bb3e --- /dev/null +++ b/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; diff --git a/test/fields/config.ts b/test/fields/config.ts index f361cef2de..cf068c3021 100644 --- a/test/fields/config.ts +++ b/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 }); diff --git a/test/fields/payload-types.ts b/test/fields/payload-types.ts index 7b0f6cbf5c..34c7857078 100644 --- a/test/fields/payload-types.ts +++ b/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".