Added date-picker.js

Also fixed the validation issue such the (*) appears in the checkboxes
 and datepickers. However, it isn't on the single checkbox.

Author: Arun-42

packages/ant-component-mapper/src/common/multiple-choice-list.js

@@ -23,14 +23,15 @@ const Wrapper = ({ label, isRequired, children, meta, validateOnMount, helperTex
     <Form required={isRequired} layout="vertical" component="fieldset">
       <Form.Item
         label={label}
+        name={label}
         help={helperText || description || invalid}
         validateStatus={!invalid ? '' : 'error'}
         rules={[
           {
             required: isRequired,
             message: 'Required'
           }
-        ]} //this is useless
+        ]}
       >
         {children}
       </Form.Item>

packages/ant-component-mapper/src/files/component-mapper.js

@@ -5,6 +5,7 @@ import PlainText from './plain-text';
 import TextField from './text-field';
 import TextArea from './text-area';
 import Checkbox from './checkbox';
+import DatePicker from './date-picker'
 
 export const components = {};
 
@@ -16,7 +17,7 @@ const componentMapper = {
   [componentTypes.SUB_FORM]: () => <div>sub form</div>,
   [componentTypes.RADIO]: () => <div>Radio field</div>,
   [componentTypes.TABS]: Tabs,
-  [componentTypes.DATE_PICKER]: () => <div>Date picker</div>,
+  [componentTypes.DATE_PICKER]: DatePicker,
   [componentTypes.TIME_PICKER]: () => <div>Time picker</div>,
   [componentTypes.SELECT]: () => <div>Select field</div>,
   [componentTypes.PLAIN_TEXT]: PlainText,

packages/ant-component-mapper/src/files/date-picker.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DatePicker as AntDatePicker, Form } from 'antd';
+import { validationError } from '../common/helpers';
+import { meta, input } from '@data-driven-forms/common/src/prop-types-templates';
+import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+
+const DatePicker = (props) => {
+  const { input, isReadOnly, isDisabled, placeholder, isRequired, label, helperText, description, validateOnMount, meta } = useFieldApi(props);
+  const invalid = validationError(meta, validateOnMount);
+  const placeholderDisplay = placeholder ? placeholder : 'Select date';
+  return (
+    <Form layout="vertical">
+      <Form.Item
+        label={label}
+        rules={[
+          {
+            required: isRequired,
+            message: 'Required'
+          }
+        ]}
+        name={label}
+        validateStatus={!invalid ? '' : 'error'}
+        help={invalid || helperText || description}
+      >
+        <AntDatePicker
+          disabled={isDisabled || isReadOnly}
+          placeholder={placeholderDisplay}
+          required={isRequired}
+          error={!!invalid}
+          readOnly={isReadOnly}
+          {...input}
+          value={input.value || null}
+        />
+      </Form.Item>
+    </Form>
+  );
+};
+
+DatePicker.propTypes = {
+  input,
+  meta,
+  isReadOnly: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  placeholder: PropTypes.node,
+  isRequired: PropTypes.bool,
+  label: PropTypes.node,
+  helperText: PropTypes.node,
+  validateOnMount: PropTypes.bool,
+  locale: PropTypes.string,
+  description: PropTypes.node
+};
+
+export default DatePicker;