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

dev-test/config.yml

@@ -18,7 +18,7 @@ collections: # A list of collections the CMS should be able to edit
     create: true # Allow users to create new documents in this collection
     fields: # The fields each document in this collection have
       - { label: 'Title', name: 'title', widget: 'string', tagname: 'h1' }
-      - { label: 'Publish Date', name: 'date', widget: 'datetime', format: 'YYYY-MM-DD hh:mma' }
+      - { label: 'Publish Date', name: 'date', widget: 'datetime', dateFormat: 'YYYY-MM-DD', timeFormat: 'HH:mm', format: 'YYYY-MM-DD HH:mm' }
       - label: 'Cover Image'
         name: 'image'
         widget: 'image'

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) {
+    if (format) {
-      const formattedValue = moment(datetime).format(this.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}
+        dateFormat={dateFormat}
-        value={moment(value, this.format)}
+        timeFormat={timeFormat}
+        value={moment(value, format)}
         onChange={this.handleChange}
         onFocus={setActiveStyle}
         onBlur={this.onBlur}

website/content/docs/widgets/date.md

@@ -11,6 +11,8 @@ The date widget translates a date picker input to a date string. For saving date
 - **Options:**
   - `default`: accepts a date string, or an empty string to accept blank input; otherwise defaults to current date
   - `format`: optional; accepts Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/); defaults to raw Date object (if supported by output format)
+  - `dateFormat`: optional; boolean or Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/). If `true` use default locale format.
+  - `timeFormat`: optional; boolean or Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/). If `true` use default locale format, `false` hides time-picker. Defaults to false.
 - **Example:**
     ```yaml
     - label: "Birthdate"

website/content/docs/widgets/datetime.md

@@ -11,6 +11,8 @@ The datetime widget translates a datetime picker to a datetime string. For savin
 - **Options:**
   - `default`: accepts a datetime string, or an empty string to accept blank input; otherwise defaults to current datetime
   - `format`: optional; accepts Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/); defaults to raw Date object (if supported by output format)
+  - `dateFormat`: optional; boolean or Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/). If `true` use default locale format.
+  - `timeFormat`: optional; boolean or Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/). If `true` use default locale format, `false` hides time-picker.
 - **Example:**
     ```yaml
     - label: "Start time"