fix: updates typing on DatePicker component and joi schema

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

@@ -10,29 +10,26 @@ const baseClass = 'date-time-picker';
 
 const DateTime: React.FC<Props> = (props) => {
   const {
-    inputDateTimeFormat,
-    useDate = true,
+    value,
+    onChange,
+    displayFormat,
+    pickerAppearance = 'dayAndTime',
     minDate,
     maxDate,
-    monthsShown = 1,
-    useTime = true,
+    monthsToShow = 1,
     minTime,
     maxTime,
     timeIntervals = 30,
     timeFormat = 'h:mm aa',
+    readOnly,
     placeholder: placeholderText,
-    value,
-    onChange,
-    admin: {
-      readOnly,
-    } = {},
   } = props;
 
-  let dateTimeFormat = inputDateTimeFormat;
+  let dateTimeFormat = displayFormat;
 
-  if (!dateTimeFormat) {
-    if (useTime && useDate) dateTimeFormat = 'MMM d, yyy h:mm a';
-    else if (useTime) dateTimeFormat = 'h:mm a';
+  if (dateTimeFormat === undefined) {
+    if (pickerAppearance === 'dayAndTime') dateTimeFormat = 'MMM d, yyy h:mm a';
+    else if (pickerAppearance === 'timeOnly') dateTimeFormat = 'h:mm a';
     else dateTimeFormat = 'MMM d, yyy';
   }
 
@@ -40,8 +37,8 @@ const DateTime: React.FC<Props> = (props) => {
     minDate,
     maxDate,
     dateFormat: dateTimeFormat,
-    monthsShown: Math.min(2, monthsShown),
-    showTimeSelect: useTime,
+    monthsShown: Math.min(2, monthsToShow),
+    showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',
     minTime,
     maxTime,
     timeIntervals,
@@ -56,7 +53,7 @@ const DateTime: React.FC<Props> = (props) => {
 
   const classes = [
     baseClass,
-    !useDate && `${baseClass}--hide-dates`,
+    `${baseClass}__appearance--${pickerAppearance}`,
   ].filter(Boolean).join(' ');
 
   return (

src/admin/components/elements/DatePicker/index.scss

@@ -8,7 +8,7 @@ $cal-icon-width: 18px;
     width: 120px;
   }
 
-  &--hide-dates {
+  &__appearance--timeOnly {
     .react-datepicker {
       width: 100%;
 

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

@@ -1,18 +1,35 @@
-export type Props = {
-  placeholder?: string,
-  useDate?: boolean,
-  minDate?: Date,
-  maxDate?: Date,
-  monthsShown?: number,
-  inputDateTimeFormat?: string,
-  useTime?: boolean,
-  minTime?: Date,
-  maxTime?: Date,
-  timeIntervals?: number,
-  timeFormat?: string,
-  value?: Date,
-  onChange?: (val: Date) => void,
-  admin?: {
-    readOnly?: boolean,
-  }
+type SharedProps = {
+  displayFormat?: string | undefined
+  pickerAppearance?: 'dayAndTime' | 'timeOnly' | 'dayOnly'
+}
+
+type TimePickerProps = {
+  minTime?: Date
+  maxTime?: Date
+  timeIntervals?: number
+  timeFormat?: string
+}
+
+type DayPickerProps = {
+  monthsToShow?: 1 | 2
+  minDate?: Date
+  maxDate?: Date
+}
+
+export type ConditionalDateProps =
+  | SharedProps & DayPickerProps & TimePickerProps & {
+    pickerAppearance?: 'dayAndTime'
+  }
+  | SharedProps & TimePickerProps & {
+    pickerAppearance: 'timeOnly'
+  }
+  | SharedProps & DayPickerProps & {
+    pickerAppearance: 'dayOnly'
+  }
+
+export type Props = SharedProps & DayPickerProps & TimePickerProps & {
+  value?: Date
+  onChange?: (val: Date) => void
+  readOnly?: boolean
+  placeholder?: string
 }

src/admin/components/forms/field-types/DateTime/index.tsx

@@ -5,7 +5,7 @@ import withCondition from '../../withCondition';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
 import Error from '../../Error';
-import { date } from '../../../../../fields/validations';
+import { date as dateValidation } from '../../../../../fields/validations';
 import { Props } from './types';
 
 import './index.scss';
@@ -17,12 +17,14 @@ const DateTime: React.FC<Props> = (props) => {
     path: pathFromProps,
     name,
     required,
-    validate = date,
+    validate = dateValidation,
     label,
     admin: {
+      placeholder,
       readOnly,
       style,
       width,
+      date,
     } = {},
   } = props;
 
@@ -69,7 +71,9 @@ const DateTime: React.FC<Props> = (props) => {
       />
       <div className={`${baseClass}__input-wrapper`}>
         <DatePicker
-          {...props}
+          {...date}
+          placeholder={placeholder}
+          readOnly={readOnly}
           onChange={readOnly ? undefined : setValue}
           value={value as Date}
         />

src/fields/config/schema.ts

@@ -225,7 +225,21 @@ export const date = baseField.keys({
   type: joi.string().valid('date').required(),
   name: joi.string().required(),
   defaultValue: joi.string(),
-}).unknown(true); // remove when we better specify options allowed to pass to React Datepicker
+  admin: baseAdminFields.keys({
+    date: joi.object({
+      displayFormat: joi.string(),
+      pickerAppearance: joi.string(),
+      minDate: joi.date(),
+      maxDate: joi.date(),
+      minTime: joi.date(),
+      maxTime: joi.date(),
+      timeIntervals: joi.number(),
+      timeFormat: joi.string(),
+      monthsToShow: joi.number(),
+
+    }),
+  }),
+});
 
 const fieldSchema = joi.alternatives()
   .try(

src/fields/config/types.ts

@@ -4,6 +4,7 @@ import { Editor } from 'slate';
 import { PayloadRequest } from '../../express/types';
 import { Access } from '../../config/types';
 import { Document } from '../../types';
+import { ConditionalDateProps } from '../../admin/components/elements/DatePicker/types';
 
 export type FieldHook = (args: {
   value?: unknown,
@@ -112,6 +113,10 @@ export type CheckboxField = FieldBase & {
 
 export type DateField = FieldBase & {
   type: 'date';
+  admin?: Admin & {
+    placeholder?: string
+    date?: ConditionalDateProps
+  }
 }
 
 export type GroupField = FieldBase & {