diff --git a/dev-test/config.yml b/dev-test/config.yml index 261b1f03..7a2f4ccc 100644 --- a/dev-test/config.yml +++ b/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' diff --git a/packages/netlify-cms-widget-date/src/DateControl.js b/packages/netlify-cms-widget-date/src/DateControl.js index 9ce25393..c919edff 100644 --- a/packages/netlify-cms-widget-date/src/DateControl.js +++ b/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} diff --git a/website/content/docs/widgets/date.md b/website/content/docs/widgets/date.md index c133828e..30b2bf9b 100644 --- a/website/content/docs/widgets/date.md +++ b/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" diff --git a/website/content/docs/widgets/datetime.md b/website/content/docs/widgets/datetime.md index 7f9ab787..b86908a3 100644 --- a/website/content/docs/widgets/datetime.md +++ b/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"