From fa396c63c0b1edc7e8b87726e5f3855414a2c412 Mon Sep 17 00:00:00 2001 From: Mathias Biilmann Christensen Date: Thu, 23 Nov 2017 22:44:56 -0800 Subject: [PATCH 1/6] Make date and datetime widget respect format attribute --- src/components/Widgets/DateControl.js | 31 ++++++++++++++++------- src/components/Widgets/DateTimeControl.js | 26 +++---------------- 2 files changed, 26 insertions(+), 31 deletions(-) diff --git a/src/components/Widgets/DateControl.js b/src/components/Widgets/DateControl.js index 7dfa4277e89f..ff88ca2c0e5e 100644 --- a/src/components/Widgets/DateControl.js +++ b/src/components/Widgets/DateControl.js @@ -1,28 +1,41 @@ import PropTypes from 'prop-types'; import React from 'react'; import DateTime from 'react-datetime'; +import moment from 'moment'; -export default class DateControl extends React.Component { +function format(format, value) { + return moment(value).format(format || moment.defaultFormat); +} + +export default class DateTimeControl extends React.Component { componentDidMount() { if (!this.props.value) { - this.props.onChange(new Date()); + this.props.onChange(format(this.props.field.get('format'), new Date())); } } handleChange = (datetime) => { - this.props.onChange(datetime); + this.props.onChange(format(this.props.field.get('format'), datetime)); }; render() { - return (); } } -DateControl.propTypes = { +DateTimeControl.propTypes = { onChange: PropTypes.func.isRequired, - value: PropTypes.object, // eslint-disable-line + value: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string, + ]), + includeTime: PropTypes.bool, + field: PropTypes.object }; + + diff --git a/src/components/Widgets/DateTimeControl.js b/src/components/Widgets/DateTimeControl.js index ed869e655a7e..0bc5f438f526 100644 --- a/src/components/Widgets/DateTimeControl.js +++ b/src/components/Widgets/DateTimeControl.js @@ -1,27 +1,9 @@ -import PropTypes from 'prop-types'; import React from 'react'; -import DateTime from 'react-datetime'; +import DateControl from './DateControl'; export default class DateTimeControl extends React.Component { - componentDidMount() { - if (!this.props.value) { - this.props.onChange(new Date()); - } - } - - handleChange = (datetime) => { - this.props.onChange(datetime); - }; - render() { - return ; + const {onChange, format, value, field} = this.props; + return ; } -} - -DateTimeControl.propTypes = { - onChange: PropTypes.func.isRequired, - value: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string, - ]), -}; +}; \ No newline at end of file From 257ad3d86fe6a3afd3825df667e37944de0fe630 Mon Sep 17 00:00:00 2001 From: Mathias Biilmann Christensen Date: Sun, 26 Nov 2017 11:30:53 -0800 Subject: [PATCH 2/6] Keep old behevior if no format attribute is set on date widgets --- src/components/Widgets/DateControl.js | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/src/components/Widgets/DateControl.js b/src/components/Widgets/DateControl.js index ff88ca2c0e5e..5ec741eb62bb 100644 --- a/src/components/Widgets/DateControl.js +++ b/src/components/Widgets/DateControl.js @@ -4,13 +4,28 @@ import DateTime from 'react-datetime'; import moment from 'moment'; function format(format, value) { - return moment(value).format(format || moment.defaultFormat); + if (format) { + return moment(value).format(format || moment.defaultFormat); + } + return value; +} + +function toDate(format, value) { + if (format) { + return moment(value, format); + } + return value; } export default class DateTimeControl extends React.Component { componentDidMount() { - if (!this.props.value) { - this.props.onChange(format(this.props.field.get('format'), new Date())); + const {value, field, onChange} = this.props; + if (!value) { + if (field.get('format')) { + onChange(format(field.get('format'), new Date())); + } else { + onChange(new Date()); + } } } @@ -22,7 +37,7 @@ export default class DateTimeControl extends React.Component { return ( ); } From 47ab2f589d7a22cb3b4efbb73a9b3fa463ff2432 Mon Sep 17 00:00:00 2001 From: Benaiah Mischenko Date: Mon, 27 Nov 2017 14:19:38 -0800 Subject: [PATCH 3/6] Fixes for date formatting PR --- src/components/Widgets/DateControl.js | 52 +++++++++-------------- src/components/Widgets/DateTimeControl.js | 6 +-- 2 files changed, 24 insertions(+), 34 deletions(-) diff --git a/src/components/Widgets/DateControl.js b/src/components/Widgets/DateControl.js index 5ec741eb62bb..7ec0a6ffa4cd 100644 --- a/src/components/Widgets/DateControl.js +++ b/src/components/Widgets/DateControl.js @@ -3,54 +3,44 @@ import React from 'react'; import DateTime from 'react-datetime'; import moment from 'moment'; -function format(format, value) { - if (format) { - return moment(value).format(format || moment.defaultFormat); - } - return value; -} - -function toDate(format, value) { - if (format) { - return moment(value, format); - } - return value; -} - -export default class DateTimeControl extends React.Component { +export default class DateControl extends React.Component { componentDidMount() { - const {value, field, onChange} = this.props; + const { value, field, onChange } = this.props; if (!value) { - if (field.get('format')) { - onChange(format(field.get('format'), new Date())); - } else { - onChange(new Date()); - } + const format = field.get('format'); + const newValue = format + ? moment(new Date()).format(format) + : new Date(); + onChange(newValue); } } handleChange = (datetime) => { - this.props.onChange(format(this.props.field.get('format'), datetime)); + const { onChange, field } = this.props; + const format = field.get('format'); + const newValue = format + ? moment(datetime).format(format) + : datetime; + onChange(newValue); }; render() { - return ( - ); } } -DateTimeControl.propTypes = { +DateControl.propTypes = { onChange: PropTypes.func.isRequired, value: PropTypes.oneOfType([ PropTypes.object, PropTypes.string, ]), includeTime: PropTypes.bool, - field: PropTypes.object + field: PropTypes.object, }; - - diff --git a/src/components/Widgets/DateTimeControl.js b/src/components/Widgets/DateTimeControl.js index 0bc5f438f526..fb736b672db4 100644 --- a/src/components/Widgets/DateTimeControl.js +++ b/src/components/Widgets/DateTimeControl.js @@ -3,7 +3,7 @@ import DateControl from './DateControl'; export default class DateTimeControl extends React.Component { render() { - const {onChange, format, value, field} = this.props; - return ; + const { field, format, onChange, value } = this.props; + return ; } -}; \ No newline at end of file +} From 54a617c558ff75ad5054844f22c8fc81470bcc9d Mon Sep 17 00:00:00 2001 From: Benaiah Mischenko Date: Mon, 27 Nov 2017 15:06:21 -0800 Subject: [PATCH 4/6] Coerce includeTime to a boolean --- src/components/Widgets/DateControl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Widgets/DateControl.js b/src/components/Widgets/DateControl.js index 7ec0a6ffa4cd..e81c28aca978 100644 --- a/src/components/Widgets/DateControl.js +++ b/src/components/Widgets/DateControl.js @@ -28,7 +28,7 @@ export default class DateControl extends React.Component { const { field, includeTime, value } = this.props; const format = field.get('format', moment.defaultFormat); return (); From c87660daba4e7d16b6156377bc2d0c6608d4dc9f Mon Sep 17 00:00:00 2001 From: Shawn Erquhart Date: Mon, 27 Nov 2017 21:13:02 -0500 Subject: [PATCH 5/6] simplify date time initial value set --- src/components/Widgets/DateControl.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/components/Widgets/DateControl.js b/src/components/Widgets/DateControl.js index e81c28aca978..ebd218af4c3e 100644 --- a/src/components/Widgets/DateControl.js +++ b/src/components/Widgets/DateControl.js @@ -6,27 +6,22 @@ import moment from 'moment'; export default class DateControl extends React.Component { componentDidMount() { const { value, field, onChange } = this.props; + this.format = field.get('format'); if (!value) { - const format = field.get('format'); - const newValue = format - ? moment(new Date()).format(format) - : new Date(); - onChange(newValue); + this.handleChange(new Date()); } } - handleChange = (datetime) => { - const { onChange, field } = this.props; - const format = field.get('format'); - const newValue = format - ? moment(datetime).format(format) + handleChange = datetime => { + const newValue = this.format + ? moment(datetime).format(this.format) : datetime; onChange(newValue); }; render() { - const { field, includeTime, value } = this.props; - const format = field.get('format', moment.defaultFormat); + const { includeTime, value } = this.props; + const format = this.format || moment.defaultFormat; return ( Date: Mon, 27 Nov 2017 21:17:17 -0500 Subject: [PATCH 6/6] allow empty default date value --- docs/widgets.md | 11 +++++++++++ src/components/Widgets/DateControl.js | 9 +++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/docs/widgets.md b/docs/widgets.md index 022fea5cfb32..7cae9f68f411 100644 --- a/docs/widgets.md +++ b/docs/widgets.md @@ -99,3 +99,14 @@ collections: searchFields: [name, twitterHandle] valueField: name ``` + +### Date Widget / DateTime Widget + +The date and datetime widgets provide date or datetime pickers when the widget is active. The resulting date string can be formatted (uses Moment.js), and accepts a default value. The initial value will be the current date unless `false` or an empty string are provided as the default value. + +The following field configuration properties are specific to fields using the date or datetime widget: + +Property | Accepted Values | Description +--- | --- | --- +`format` | string | format string uses Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/) +`default` | boolean, string | can be a date string, or else an empty string - defaults to current date diff --git a/src/components/Widgets/DateControl.js b/src/components/Widgets/DateControl.js index ebd218af4c3e..56fcb08e4e9d 100644 --- a/src/components/Widgets/DateControl.js +++ b/src/components/Widgets/DateControl.js @@ -7,7 +7,12 @@ export default class DateControl extends React.Component { componentDidMount() { const { value, field, onChange } = this.props; this.format = field.get('format'); - if (!value) { + + /** + * Set the current date as default value if no default value is provided. An + * empty string means the value is intentionally blank. + */ + if (!value && value !== '') { this.handleChange(new Date()); } } @@ -16,7 +21,7 @@ export default class DateControl extends React.Component { const newValue = this.format ? moment(datetime).format(this.format) : datetime; - onChange(newValue); + this.props.onChange(newValue); }; render() {