feat(widget-date): add input display formatting (#1739)

packages/netlify-cms-widget-date/src/DateControl.js

@@ -20,7 +20,27 @@ export default class DateControl extends React.Component {
     includeTime: PropTypes.bool,
   };
 
-  format = this.props.field.get('format');
+  getFormats() {
+    const { field, includeTime } = this.props;
+    const format = field.get('format');
+
+    // dateFormat and timeFormat are strictly for modifying
+    // input field with the date/time pickers
+    const dateFormat = field.get('dateFormat');
+    // show time-picker? false hides it, true shows it using default format
+    let timeFormat = field.get('timeFormat');
+    if (typeof timeFormat === 'undefined') {
+      timeFormat = !!includeTime;
+    }
+
+    return {
+      format,
+      dateFormat,
+      timeFormat,
+    };
+  }
+
+  formats = this.getFormats();
 
   componentDidMount() {
     const { value } = this.props;
@@ -42,8 +62,6 @@ export default class DateControl extends React.Component {
     moment.isMoment(datetime) || datetime instanceof Date || datetime === '';
 
   handleChange = datetime => {
-    const { onChange } = this.props;
-
     /**
      * Set the date only if it is valid.
      */
@@ -51,12 +69,15 @@ export default class DateControl extends React.Component {
       return;
     }
 
+    const { onChange } = this.props;
+    const { format } = this.formats;
+
     /**
      * Produce a formatted string only if a format is set in the config.
      * Otherwise produce a date object.
      */
-    if (this.format) {
-      const formattedValue = moment(datetime).format(this.format);
+    if (format) {
+      const formattedValue = moment(datetime).format(format);
       onChange(formattedValue);
     } else {
       const value = moment.isMoment(datetime) ? datetime.toDate() : datetime;
@@ -81,11 +102,13 @@ export default class DateControl extends React.Component {
   };
 
   render() {
-    const { includeTime, value, classNameWrapper, setActiveStyle } = this.props;
+    const { value, classNameWrapper, setActiveStyle } = this.props;
+    const { format, dateFormat, timeFormat } = this.formats;
     return (
       <DateTime
-        timeFormat={!!includeTime}
-        value={moment(value, this.format)}
+        dateFormat={dateFormat}
+        timeFormat={timeFormat}
+        value={moment(value, format)}
         onChange={this.handleChange}
         onFocus={setActiveStyle}
         onBlur={this.onBlur}