return date object from date/datetime widgets if no format set (decap…

…org#1296)

* return date object from date/datetime widgets if no format set

BREAKING CHANGE

As of 1.0, the documented behavior for the date and datetime widgets was
to always return a string value, but they were instead returning a date
object if the default date was not manually changed by the user. This
was addressed in decaporg#1143, but it became clear afterward that static site
generators were depending on the raw date objects that Netlify CMS was
unintentionally producing. Remaining as is or addressing the bug were
both "breaking" states, so this commit reverts to producing raw date
objects when no format is explicitly set.

It is now considered an edge case to require string dates, as most
static site generators expect to parse a raw date against formatting in
a site's templates.

Also note that this commit improves the original behavior by always
providing a date object when no format is provided, even if the user
manually changes the value.

* produce raw date when no format is provided

CHANGELOG.md

@@ -5,6 +5,12 @@
     Click to see more.
   </summary>
 
+  ## v1
+
+  ---
+
+  ## v2
+  * (possibly breaking): return date object from date/datetime widgets if no format set ([@erquhart](https://github.com/erquhart) in [#1296](https://github.com/netlify/netlify-cms/pull/1296))
 </details>
 
 ## 1.8.2 (May 24, 2018)

src/components/EditorWidgets/Date/DateControl.js

@@ -20,7 +20,7 @@ export default class DateControl extends React.Component {
     includeTime: PropTypes.bool,
   };
 
-  format = this.props.field.get('format') || (this.props.includeTime ? DEFAULT_DATETIME_FORMAT : DEFAULT_DATE_FORMAT);
+  format = this.props.field.get('format');
 
   componentDidMount() {
     const { value } = this.props;
@@ -41,22 +41,34 @@ export default class DateControl extends React.Component {
   handleChange = datetime => {
     const { onChange } = this.props;
 
-    // Set the date only if the format is valid
-    if (this.isValidDate(datetime)) {
+    /**
+     * Set the date only if it is valid.
+     */
+    if (!this.isValidDate(datetime)) {
+      return;
+    }
+
+    /**
+     * 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);
       onChange(formattedValue);
+    } else {
+      const value = moment.isMoment(datetime) ? datetime.toDate() : datetime;
+      onChange(value);
     }
   };
 
   onBlur = datetime => {
-    const { setInactiveStyle, onChange } = this.props;
+    const { setInactiveStyle } = this.props;
 
     if (!this.isValidDate(datetime)) {
       const parsedDate = moment(datetime);
 
       if (parsedDate.isValid()) {
-        const formattedValue = parsedDate.format(this.format);
-        onChange(formattedValue);
+        this.handleChange(datetime);
       } else {
         window.alert('The date you entered is invalid.');
       }
@@ -67,11 +79,10 @@ export default class DateControl extends React.Component {
 
   render() {
     const { includeTime, value, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props;
-    const format = this.format;
     return (
       <DateTime
         timeFormat={!!includeTime}
-        value={moment(value, format)}
+        value={moment(value, this.format)}
         onChange={this.handleChange}
         onFocus={setActiveStyle}
         onBlur={this.onBlur}

website/site/content/docs/widgets/date.md

@@ -12,7 +12,7 @@ The date widget translates a date picker input to a date string. For saving date
 - **Data type:** Moment.js-formatted date string
 - **Options:**
   - `default`: accepts a date string, or an empty string to accept blank input; otherwise defaults to current date
-  - `format`: accepts Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/); defaults to ISO8601 format `YYYY-MM-DD`
+  - `format`: optional; accepts Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/); defaults to raw Date object (if supported by output format)
 - **Example:**
 
   ```yaml

website/site/content/docs/widgets/datetime.md

@@ -12,7 +12,7 @@ The datetime widget translates a datetime picker to a datetime string. For savin
 - **Data type:** Moment.js-formatted datetime string
 - **Options:**
   - `default`: accepts a datetime string, or an empty string to accept blank input; otherwise defaults to current datetime
-  - `format`: accepts Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/); defaults to ISO8601 format `YYYY-MM-DDTHH:mm:ssZ`
+  - `format`: optional; accepts Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/); defaults to raw Date object (if supported by output format)
 - **Example:**
 
   ```yaml