Skip to content

Commit

Permalink
return date object from date/datetime widgets if no format set
Browse files Browse the repository at this point in the history
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 #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.
  • Loading branch information
erquhart committed May 25, 2018
1 parent 55c8302 commit 3229c27
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 10 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
28 changes: 20 additions & 8 deletions src/components/EditorWidgets/Date/DateControl.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ 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);
formatOutput = this.props.field.get('format');
formatDisplay = this.formatOutput || (this.props.includeTime ? DEFAULT_DATETIME_FORMAT : DEFAULT_DATE_FORMAT);

componentDidMount() {
const { value } = this.props;
Expand All @@ -41,22 +42,33 @@ 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)) {
const formattedValue = moment(datetime).format(this.format);
/**
* 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.formatOutput) {
const formattedValue = moment(datetime).format(this.formatOutput);
onChange(formattedValue);
} else {
onChange(datetime);
}
};

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.');
}
Expand All @@ -67,7 +79,7 @@ export default class DateControl extends React.Component {

render() {
const { includeTime, value, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props;
const format = this.format;
const format = this.formatDisplay;
return (
<DateTime
timeFormat={!!includeTime}
Expand Down
2 changes: 1 addition & 1 deletion website/site/content/docs/widgets/date.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion website/site/content/docs/widgets/datetime.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 3229c27

Please sign in to comment.