From 67be56c1cd47d26163f196e3e0b877ad9574dbea Mon Sep 17 00:00:00 2001 From: Damien Duhamel Date: Wed, 11 Apr 2018 19:04:07 +0200 Subject: [PATCH 1/5] Allow typing in date widget --- src/components/EditorWidgets/Date/DateControl.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/EditorWidgets/Date/DateControl.js b/src/components/EditorWidgets/Date/DateControl.js index 1b07a272188b..d2c16089ede3 100644 --- a/src/components/EditorWidgets/Date/DateControl.js +++ b/src/components/EditorWidgets/Date/DateControl.js @@ -36,9 +36,8 @@ export default class DateControl extends React.Component { handleChange = datetime => { const { onChange } = this.props; - if (!this.format || datetime === '') { - onChange(datetime); - } else { + // Set the date if the format is valid (moment or Date object otherwise datetime is a string). + if (moment.isMoment(datetime) || datetime instanceof Date) { const formattedValue = moment(datetime).format(this.format); onChange(formattedValue); } From 5271819adef7748654d5990ae4f0ee24e1083b4e Mon Sep 17 00:00:00 2001 From: Damien Duhamel Date: Thu, 12 Apr 2018 13:30:14 +0200 Subject: [PATCH 2/5] Handle empty case & warn user when invalid --- .../EditorWidgets/Date/DateControl.js | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/components/EditorWidgets/Date/DateControl.js b/src/components/EditorWidgets/Date/DateControl.js index d2c16089ede3..9e3f6dce75ff 100644 --- a/src/components/EditorWidgets/Date/DateControl.js +++ b/src/components/EditorWidgets/Date/DateControl.js @@ -34,15 +34,31 @@ export default class DateControl extends React.Component { } } + // Date is valid if datetime is a moment or Date object otherwise it's a string. + // Handle the empty case, if the user wants to empty the field. + isValid = datetime => (moment.isMoment(datetime) || datetime instanceof Date || datetime === ''); + handleChange = datetime => { const { onChange } = this.props; - // Set the date if the format is valid (moment or Date object otherwise datetime is a string). - if (moment.isMoment(datetime) || datetime instanceof Date) { + + // Set the date only if the format is valid + if (this.isValid(datetime)) { const formattedValue = moment(datetime).format(this.format); onChange(formattedValue); } }; + onBlur = datetime => { + const { setInactiveStyle } = this.props; + + // Warn the user if the date is invalid + if (!this.isValid(datetime)) { + window.alert('The date you entered is invalid.'); + } + + setInactiveStyle(); + }; + render() { const { includeTime, value, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props; const format = this.format; @@ -52,7 +68,7 @@ export default class DateControl extends React.Component { value={moment(value, format)} onChange={this.handleChange} onFocus={setActiveStyle} - onBlur={setInactiveStyle} + onBlur={this.onBlur} inputProps={{ className: classNameWrapper }} /> ); From 89edc130394074a8fe259c73840999f3f47eb0bf Mon Sep 17 00:00:00 2001 From: Damien Duhamel Date: Fri, 13 Apr 2018 20:39:26 +0200 Subject: [PATCH 3/5] Try parsing date with moment --- src/components/EditorWidgets/Date/DateControl.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/EditorWidgets/Date/DateControl.js b/src/components/EditorWidgets/Date/DateControl.js index 9e3f6dce75ff..eb395f9a6197 100644 --- a/src/components/EditorWidgets/Date/DateControl.js +++ b/src/components/EditorWidgets/Date/DateControl.js @@ -49,11 +49,15 @@ export default class DateControl extends React.Component { }; onBlur = datetime => { - const { setInactiveStyle } = this.props; + const { setInactiveStyle, onChange } = this.props; - // Warn the user if the date is invalid if (!this.isValid(datetime)) { - window.alert('The date you entered is invalid.'); + const parsedDate = moment(datetime); + + if (parsedDate.isValid()) { + const formattedValue = parsedDate.format(this.format); + onChange(formattedValue); + } } setInactiveStyle(); From 0c46805609d2c2c24ca2276ba6f0f4788c52d6df Mon Sep 17 00:00:00 2001 From: Damien Duhamel Date: Sat, 14 Apr 2018 13:31:30 +0200 Subject: [PATCH 4/5] Rename isValid -> isValidDate --- src/components/EditorWidgets/Date/DateControl.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/EditorWidgets/Date/DateControl.js b/src/components/EditorWidgets/Date/DateControl.js index eb395f9a6197..684e2487dfe3 100644 --- a/src/components/EditorWidgets/Date/DateControl.js +++ b/src/components/EditorWidgets/Date/DateControl.js @@ -36,13 +36,13 @@ export default class DateControl extends React.Component { // Date is valid if datetime is a moment or Date object otherwise it's a string. // Handle the empty case, if the user wants to empty the field. - isValid = datetime => (moment.isMoment(datetime) || datetime instanceof Date || datetime === ''); + isValidDate = datetime => (moment.isMoment(datetime) || datetime instanceof Date || datetime === ''); handleChange = datetime => { const { onChange } = this.props; // Set the date only if the format is valid - if (this.isValid(datetime)) { + if (this.isValidDate(datetime)) { const formattedValue = moment(datetime).format(this.format); onChange(formattedValue); } @@ -51,7 +51,7 @@ export default class DateControl extends React.Component { onBlur = datetime => { const { setInactiveStyle, onChange } = this.props; - if (!this.isValid(datetime)) { + if (!this.isValidDate(datetime)) { const parsedDate = moment(datetime); if (parsedDate.isValid()) { From 532b311e3d9982a2829afeadfd41b10730f7cb24 Mon Sep 17 00:00:00 2001 From: Damien Duhamel Date: Sat, 14 Apr 2018 13:37:09 +0200 Subject: [PATCH 5/5] Warn user when date is invalid --- src/components/EditorWidgets/Date/DateControl.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/EditorWidgets/Date/DateControl.js b/src/components/EditorWidgets/Date/DateControl.js index 684e2487dfe3..63d5d4365dc8 100644 --- a/src/components/EditorWidgets/Date/DateControl.js +++ b/src/components/EditorWidgets/Date/DateControl.js @@ -57,6 +57,8 @@ export default class DateControl extends React.Component { if (parsedDate.isValid()) { const formattedValue = parsedDate.format(this.format); onChange(formattedValue); + } else { + window.alert('The date you entered is invalid.'); } }