Add datepicker and time picker

Signed-off-by: soupette <cyril@strapi.io>

packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/utils/cleanData.js

@@ -1,4 +1,6 @@
-import { get, isArray, isObject } from 'lodash';
+import get from 'lodash/get';
+import isArray from 'lodash/isArray';
+import isObject from 'lodash/isObject';
 
 /* eslint-disable indent */
 
@@ -23,13 +25,23 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
           }
 
           break;
-        case 'date':
-          cleanedData =
-            value && value._isAMomentObject === true ? value.format('YYYY-MM-DD') : value;
-          break;
-        case 'datetime':
-          cleanedData = value && value._isAMomentObject === true ? value.toISOString() : value;
+        // TODO
+        // case 'date':
+        //   cleanedData =
+        //     value && value._isAMomentObject === true ? value.format('YYYY-MM-DD') : value;
+        //   break;
+        // case 'datetime':
+        //   cleanedData = value && value._isAMomentObject === true ? value.toISOString() : value;
+        //   break;
+        case 'time': {
+          cleanedData = value;
+
+          if (value && value.split(':').length < 3) {
+            cleanedData = `${value}:00`;
+          }
+
           break;
+        }
         case 'media':
           if (getOtherInfos(schema, [current, 'multiple']) === true) {
             cleanedData = value ? value.filter(file => !(file instanceof File)) : null;

packages/core/admin/admin/src/content-manager/components/Inputs/GenericInput.js

@@ -5,15 +5,19 @@
  */
 
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import cloneDeep from 'lodash/cloneDeep';
+import { formatISO } from 'date-fns';
+import { DatePicker } from '@strapi/parts/DatePicker';
 import { NumberInput } from '@strapi/parts/NumberInput';
 import { Select, Option } from '@strapi/parts/Select';
 import { Textarea } from '@strapi/parts/Textarea';
 import { TextInput } from '@strapi/parts/TextInput';
+import { TimePicker } from '@strapi/parts/TimePicker';
 import { ToggleInput } from '@strapi/parts/ToggleInput';
 import Hide from '@strapi/icons/Hide';
 import Show from '@strapi/icons/Show';
-import PropTypes from 'prop-types';
 
 const GenericInput = ({
   autoComplete,
@@ -102,6 +106,29 @@ const GenericInput = ({
         />
       );
     }
+    case 'date': {
+      return (
+        <DatePicker
+          clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
+          disabled={disabled}
+          error={errorMessage}
+          label={label}
+          labelAction={labelAction}
+          id={name}
+          hint={hint}
+          name={name}
+          onChange={date => {
+            const formattedDate = formatISO(cloneDeep(date), { representation: 'date' });
+
+            onChange({ target: { name, value: formattedDate, type } });
+          }}
+          onClear={() => onChange({ target: { name, value: '', type } })}
+          placeholder={formattedPlaceholder}
+          selectedDate={value ? new Date(value) : null}
+          selectedDateLabel={formattedDate => `Date picker, current is ${formattedDate}`}
+        />
+      );
+    }
     case 'number': {
       return (
         <NumberInput
@@ -223,6 +250,39 @@ const GenericInput = ({
         </Textarea>
       );
     }
+    case 'time': {
+      let time = value;
+
+      // The backend send a value which has the following format: '00:45:00.000'
+      // or the time picker only supports hours & minutes so we need to mutate the value
+      if (value && value.split(':').length > 2) {
+        time = time.split(':');
+        time.pop();
+        time = time.join(':');
+      }
+
+      return (
+        <TimePicker
+          clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
+          disabled={disabled}
+          error={errorMessage}
+          label={label}
+          labelAction={labelAction}
+          id={name}
+          hint={hint}
+          name={name}
+          onChange={time => {
+            onChange({ target: { name, value: `${time}`, type } });
+          }}
+          onClear={() => {
+            onChange({ target: { name, value: null, type } });
+          }}
+          placeholder={formattedPlaceholder}
+          step={step}
+          value={time}
+        />
+      );
+    }
     default: {
       return <div>{type} is not supported</div>;
     }

packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/Inputs.js

@@ -7,7 +7,7 @@ import { TimePicker } from '@strapi/parts/TimePicker';
 import { Select, Option } from '@strapi/parts/Select';
 import { useIntl } from 'react-intl';
 import { formatISO } from 'date-fns';
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
 
 const Inputs = ({ label, onChange, options, type, value }) => {
   const { formatMessage } = useIntl();