@instructure/ui-date-time-input 8.36.1-snapshot-3 → 8.36.1-snapshot-7

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.36.1-snapshot-3](https://github.com/instructure/instructure-ui/compare/v8.36.0...v8.36.1-snapshot-3) (2023-04-11)
+## [8.36.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.36.0...v8.36.1-snapshot-7) (2023-04-12)
 
-**Note:** Version bump only for package @instructure/ui-date-time-input
+
+### Bug Fixes
+
+* **ui-date-time-input:** dateTimeInput does not trigger invalidDateTimeMessage on blur ([307a3f4](https://github.com/instructure/instructure-ui/commit/307a3f4e288aefcc8ae01ef4c39e30015d2c021f))
 
 
 

package/es/DateTimeInput/index.js

@@ -75,16 +75,13 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       // timeout is needed here because handleDayClick could be called in the same
       // frame, and it updates calendarSelectedDate which is read in here.
       window.setTimeout(() => {
-        // update state based on the DateInput's text value
-        if (this.state.dateInputTextChanged || event.key === 'Enter') {
+        if (event.key === 'Enter') {
+          // user pressed enter, use the selected value in the calendar
+          this.updateStateBasedOnDateInput(this.state.calendarSelectedDate, event);
+        } else {
+          // user clicked outside/tabbed away/pressed esc, try to use the value in dateInputText
           const dateParsed = this.tryParseDate(this.state.dateInputText);
           this.updateStateBasedOnDateInput(dateParsed, event);
-        } else {
-          // user clicked outside or tabbed away or pressed esc, reset text
-          this.setState({
-            dateInputText: this.state.iso ? this.state.iso.format(this.dateFormat) : '',
-            calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
-          });
         }
         this.setState({
           isShowingCalendar: false,
@@ -93,13 +90,10 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       }, 0);
     };
     this.handleTimeChange = (event, option) => {
-      let newValue;
-      if (this.state.iso) {
-        newValue = option.value;
-      } else {
-        // if no date is set just return the input text, it will error
-        newValue = option.inputText;
-      }
+      // this.state.iso is undefined if date is invalid or not set.
+      // in this case recalculate with the dateInput's text which will result in
+      // an empty valid date (if isRequired is false) or an invalid date.
+      const newValue = this.state.iso ? option.value : this.state.dateInputText;
       const newState = this.recalculateState(newValue, true, false);
       this.changeStateIfNeeded(newState, event);
       this.setState({
@@ -107,19 +101,26 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       });
     };
     this.changeStateIfNeeded = (newState, e) => {
-      this.setState({
-        message: newState.message
-      });
-      if (!newState.iso && !this.state.iso) {
-        return;
+      const dateStr = newState.dateInputText;
+      if (this.props.isRequired && !newState.iso || dateStr && dateStr.length > 0 && !newState.iso) {
+        const text = typeof this.props.invalidDateTimeMessage === 'function' ? this.props.invalidDateTimeMessage(dateStr ? dateStr : '') : this.props.invalidDateTimeMessage;
+        // eslint-disable-next-line no-param-reassign
+        newState.message = {
+          text: text,
+          type: 'error'
+        };
       }
-      if (!this.state.iso || !newState.iso || !this.state.iso.isSame(newState.iso)) {
-        this.setState(newState);
-        if (this.props.onChange) {
-          var _newState$iso;
-          this.props.onChange(e, (_newState$iso = newState.iso) === null || _newState$iso === void 0 ? void 0 : _newState$iso.toISOString());
-        }
+      this.setState(newState);
+      if (this.areDifferentDates(this.state.iso, newState.iso)) {
+        var _this$props$onChange, _this$props, _newState$iso;
+        (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e, (_newState$iso = newState.iso) === null || _newState$iso === void 0 ? void 0 : _newState$iso.toISOString());
+      }
+    };
+    this.areDifferentDates = (d1, d2) => {
+      if (!d1 && !d2) {
+        return false;
       }
+      return !d1 || !d2 || !d1.isSame(d2);
     };
     this.handleBlur = e => {
       // when TABbing from the DateInput to TimeInput or visa-versa, the blur
@@ -127,8 +128,8 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       // The timeout gives it a moment for that to happen
       if (typeof this.props.onBlur === 'function') {
         window.setTimeout(() => {
-          var _this$props$onBlur, _this$props;
-          (_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, e);
+          var _this$props$onBlur, _this$props2;
+          (_this$props$onBlur = (_this$props2 = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2, e);
         }, 0);
       }
     };
@@ -151,8 +152,7 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       });
       this.setState({
         calendarSelectedDate: toAlter,
-        renderedDate: toAlter.clone(),
-        dateInputText: toAlter.format(this.dateFormat)
+        renderedDate: toAlter.clone()
       });
     };
     this.handleSelectPrevDay = _event => {
@@ -169,8 +169,7 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       });
       this.setState({
         calendarSelectedDate: toAlter,
-        renderedDate: toAlter.clone(),
-        dateInputText: toAlter.format(this.dateFormat)
+        renderedDate: toAlter.clone()
       });
     };
     this.handleRenderNextMonth = _event => {
@@ -254,19 +253,11 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
           renderedDate: parsed.clone()
         };
       }
-      if (dateStr.length > 0 || this.props.isRequired) {
-        const text = typeof this.props.invalidDateTimeMessage === 'function' ? this.props.invalidDateTimeMessage(dateStr) : this.props.invalidDateTimeMessage;
-        errorMsg = text ? {
-          text,
-          type: 'error'
-        } : void 0;
-      }
     }
     return {
       iso: void 0,
       calendarSelectedDate: void 0,
       dateInputText: dateStr ? dateStr : '',
-      message: errorMsg,
       renderedDate: DateTime.now(this.locale(), this.timezone()),
       dateInputTextChanged: false
     };
@@ -414,24 +405,24 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
     });
   }
   render() {
-    const _this$props2 = this.props,
-      description = _this$props2.description,
-      datePlaceholder = _this$props2.datePlaceholder,
-      dateRenderLabel = _this$props2.dateRenderLabel,
-      dateInputRef = _this$props2.dateInputRef,
-      timeRenderLabel = _this$props2.timeRenderLabel,
-      timeFormat = _this$props2.timeFormat,
-      timeStep = _this$props2.timeStep,
-      timeInputRef = _this$props2.timeInputRef,
-      locale = _this$props2.locale,
-      timezone = _this$props2.timezone,
-      messages = _this$props2.messages,
-      layout = _this$props2.layout,
-      rowSpacing = _this$props2.rowSpacing,
-      colSpacing = _this$props2.colSpacing,
-      isRequired = _this$props2.isRequired,
-      interaction = _this$props2.interaction,
-      renderWeekdayLabels = _this$props2.renderWeekdayLabels;
+    const _this$props3 = this.props,
+      description = _this$props3.description,
+      datePlaceholder = _this$props3.datePlaceholder,
+      dateRenderLabel = _this$props3.dateRenderLabel,
+      dateInputRef = _this$props3.dateInputRef,
+      timeRenderLabel = _this$props3.timeRenderLabel,
+      timeFormat = _this$props3.timeFormat,
+      timeStep = _this$props3.timeStep,
+      timeInputRef = _this$props3.timeInputRef,
+      locale = _this$props3.locale,
+      timezone = _this$props3.timezone,
+      messages = _this$props3.messages,
+      layout = _this$props3.layout,
+      rowSpacing = _this$props3.rowSpacing,
+      colSpacing = _this$props3.colSpacing,
+      isRequired = _this$props3.isRequired,
+      interaction = _this$props3.interaction,
+      renderWeekdayLabels = _this$props3.renderWeekdayLabels;
     return /*#__PURE__*/React.createElement(FormFieldGroup, {
       description: description,
       layout: layout,

package/lib/DateTimeInput/index.js

@@ -60,16 +60,13 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       // timeout is needed here because handleDayClick could be called in the same
       // frame, and it updates calendarSelectedDate which is read in here.
       window.setTimeout(() => {
-        // update state based on the DateInput's text value
-        if (this.state.dateInputTextChanged || event.key === 'Enter') {
+        if (event.key === 'Enter') {
+          // user pressed enter, use the selected value in the calendar
+          this.updateStateBasedOnDateInput(this.state.calendarSelectedDate, event);
+        } else {
+          // user clicked outside/tabbed away/pressed esc, try to use the value in dateInputText
           const dateParsed = this.tryParseDate(this.state.dateInputText);
           this.updateStateBasedOnDateInput(dateParsed, event);
-        } else {
-          // user clicked outside or tabbed away or pressed esc, reset text
-          this.setState({
-            dateInputText: this.state.iso ? this.state.iso.format(this.dateFormat) : '',
-            calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
-          });
         }
         this.setState({
           isShowingCalendar: false,
@@ -78,13 +75,10 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       }, 0);
     };
     this.handleTimeChange = (event, option) => {
-      let newValue;
-      if (this.state.iso) {
-        newValue = option.value;
-      } else {
-        // if no date is set just return the input text, it will error
-        newValue = option.inputText;
-      }
+      // this.state.iso is undefined if date is invalid or not set.
+      // in this case recalculate with the dateInput's text which will result in
+      // an empty valid date (if isRequired is false) or an invalid date.
+      const newValue = this.state.iso ? option.value : this.state.dateInputText;
       const newState = this.recalculateState(newValue, true, false);
       this.changeStateIfNeeded(newState, event);
       this.setState({
@@ -92,19 +86,26 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       });
     };
     this.changeStateIfNeeded = (newState, e) => {
-      this.setState({
-        message: newState.message
-      });
-      if (!newState.iso && !this.state.iso) {
-        return;
+      const dateStr = newState.dateInputText;
+      if (this.props.isRequired && !newState.iso || dateStr && dateStr.length > 0 && !newState.iso) {
+        const text = typeof this.props.invalidDateTimeMessage === 'function' ? this.props.invalidDateTimeMessage(dateStr ? dateStr : '') : this.props.invalidDateTimeMessage;
+        // eslint-disable-next-line no-param-reassign
+        newState.message = {
+          text: text,
+          type: 'error'
+        };
       }
-      if (!this.state.iso || !newState.iso || !this.state.iso.isSame(newState.iso)) {
-        this.setState(newState);
-        if (this.props.onChange) {
-          var _newState$iso;
-          this.props.onChange(e, (_newState$iso = newState.iso) === null || _newState$iso === void 0 ? void 0 : _newState$iso.toISOString());
-        }
+      this.setState(newState);
+      if (this.areDifferentDates(this.state.iso, newState.iso)) {
+        var _this$props$onChange, _this$props, _newState$iso;
+        (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e, (_newState$iso = newState.iso) === null || _newState$iso === void 0 ? void 0 : _newState$iso.toISOString());
+      }
+    };
+    this.areDifferentDates = (d1, d2) => {
+      if (!d1 && !d2) {
+        return false;
       }
+      return !d1 || !d2 || !d1.isSame(d2);
     };
     this.handleBlur = e => {
       // when TABbing from the DateInput to TimeInput or visa-versa, the blur
@@ -112,8 +113,8 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       // The timeout gives it a moment for that to happen
       if (typeof this.props.onBlur === 'function') {
         window.setTimeout(() => {
-          var _this$props$onBlur, _this$props;
-          (_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, e);
+          var _this$props$onBlur, _this$props2;
+          (_this$props$onBlur = (_this$props2 = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2, e);
         }, 0);
       }
     };
@@ -136,8 +137,7 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       });
       this.setState({
         calendarSelectedDate: toAlter,
-        renderedDate: toAlter.clone(),
-        dateInputText: toAlter.format(this.dateFormat)
+        renderedDate: toAlter.clone()
       });
     };
     this.handleSelectPrevDay = _event => {
@@ -154,8 +154,7 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       });
       this.setState({
         calendarSelectedDate: toAlter,
-        renderedDate: toAlter.clone(),
-        dateInputText: toAlter.format(this.dateFormat)
+        renderedDate: toAlter.clone()
       });
     };
     this.handleRenderNextMonth = _event => {
@@ -239,19 +238,11 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
           renderedDate: parsed.clone()
         };
       }
-      if (dateStr.length > 0 || this.props.isRequired) {
-        const text = typeof this.props.invalidDateTimeMessage === 'function' ? this.props.invalidDateTimeMessage(dateStr) : this.props.invalidDateTimeMessage;
-        errorMsg = text ? {
-          text,
-          type: 'error'
-        } : void 0;
-      }
     }
     return {
       iso: void 0,
       calendarSelectedDate: void 0,
       dateInputText: dateStr ? dateStr : '',
-      message: errorMsg,
       renderedDate: _DateTime.DateTime.now(this.locale(), this.timezone()),
       dateInputTextChanged: false
     };
@@ -399,24 +390,24 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
     });
   }
   render() {
-    const _this$props2 = this.props,
-      description = _this$props2.description,
-      datePlaceholder = _this$props2.datePlaceholder,
-      dateRenderLabel = _this$props2.dateRenderLabel,
-      dateInputRef = _this$props2.dateInputRef,
-      timeRenderLabel = _this$props2.timeRenderLabel,
-      timeFormat = _this$props2.timeFormat,
-      timeStep = _this$props2.timeStep,
-      timeInputRef = _this$props2.timeInputRef,
-      locale = _this$props2.locale,
-      timezone = _this$props2.timezone,
-      messages = _this$props2.messages,
-      layout = _this$props2.layout,
-      rowSpacing = _this$props2.rowSpacing,
-      colSpacing = _this$props2.colSpacing,
-      isRequired = _this$props2.isRequired,
-      interaction = _this$props2.interaction,
-      renderWeekdayLabels = _this$props2.renderWeekdayLabels;
+    const _this$props3 = this.props,
+      description = _this$props3.description,
+      datePlaceholder = _this$props3.datePlaceholder,
+      dateRenderLabel = _this$props3.dateRenderLabel,
+      dateInputRef = _this$props3.dateInputRef,
+      timeRenderLabel = _this$props3.timeRenderLabel,
+      timeFormat = _this$props3.timeFormat,
+      timeStep = _this$props3.timeStep,
+      timeInputRef = _this$props3.timeInputRef,
+      locale = _this$props3.locale,
+      timezone = _this$props3.timezone,
+      messages = _this$props3.messages,
+      layout = _this$props3.layout,
+      rowSpacing = _this$props3.rowSpacing,
+      colSpacing = _this$props3.colSpacing,
+      isRequired = _this$props3.isRequired,
+      interaction = _this$props3.interaction,
+      renderWeekdayLabels = _this$props3.renderWeekdayLabels;
     return /*#__PURE__*/_react.default.createElement(_FormFieldGroup.FormFieldGroup, {
       description: description,
       layout: layout,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "8.36.1-snapshot-3",
+  "version": "8.36.1-snapshot-7",
   "description": "A UI component that allows to select date and time.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,26 +23,26 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.36.1-snapshot-3",
-    "@instructure/ui-test-locator": "8.36.1-snapshot-3",
-    "@instructure/ui-test-utils": "8.36.1-snapshot-3"
+    "@instructure/ui-babel-preset": "8.36.1-snapshot-7",
+    "@instructure/ui-test-locator": "8.36.1-snapshot-7",
+    "@instructure/ui-test-utils": "8.36.1-snapshot-7"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@instructure/debounce": "8.36.1-snapshot-3",
-    "@instructure/emotion": "8.36.1-snapshot-3",
-    "@instructure/ui-a11y-content": "8.36.1-snapshot-3",
-    "@instructure/ui-buttons": "8.36.1-snapshot-3",
-    "@instructure/ui-calendar": "8.36.1-snapshot-3",
-    "@instructure/ui-date-input": "8.36.1-snapshot-3",
-    "@instructure/ui-form-field": "8.36.1-snapshot-3",
-    "@instructure/ui-i18n": "8.36.1-snapshot-3",
-    "@instructure/ui-icons": "8.36.1-snapshot-3",
-    "@instructure/ui-prop-types": "8.36.1-snapshot-3",
-    "@instructure/ui-react-utils": "8.36.1-snapshot-3",
-    "@instructure/ui-testable": "8.36.1-snapshot-3",
-    "@instructure/ui-time-select": "8.36.1-snapshot-3",
-    "@instructure/ui-utils": "8.36.1-snapshot-3",
+    "@instructure/debounce": "8.36.1-snapshot-7",
+    "@instructure/emotion": "8.36.1-snapshot-7",
+    "@instructure/ui-a11y-content": "8.36.1-snapshot-7",
+    "@instructure/ui-buttons": "8.36.1-snapshot-7",
+    "@instructure/ui-calendar": "8.36.1-snapshot-7",
+    "@instructure/ui-date-input": "8.36.1-snapshot-7",
+    "@instructure/ui-form-field": "8.36.1-snapshot-7",
+    "@instructure/ui-i18n": "8.36.1-snapshot-7",
+    "@instructure/ui-icons": "8.36.1-snapshot-7",
+    "@instructure/ui-prop-types": "8.36.1-snapshot-7",
+    "@instructure/ui-react-utils": "8.36.1-snapshot-7",
+    "@instructure/ui-testable": "8.36.1-snapshot-7",
+    "@instructure/ui-time-select": "8.36.1-snapshot-7",
+    "@instructure/ui-utils": "8.36.1-snapshot-7",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/DateTimeInput/README.md

@@ -63,9 +63,14 @@ class Example extends React.Component {
   }
 
   onChange = (e, isoDate) => {
+    let messages = []
+    if (!isoDate) {
+      // this happens if an invalid date is entered
+      this.setState({ messages })
+      return
+    }
     const now = new Date()
     const newValue = new Date(isoDate)
-    let messages = []
     if ( newValue.valueOf() <= now.valueOf()) {
       messages = [{text: 'That date-time is in the past', type: 'hint'}]
     }

package/src/DateTimeInput/index.tsx

@@ -169,19 +169,11 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
           renderedDate: parsed.clone()
         }
       }
-      if (dateStr.length > 0 || this.props.isRequired) {
-        const text =
-          typeof this.props.invalidDateTimeMessage === 'function'
-            ? this.props.invalidDateTimeMessage(dateStr)
-            : this.props.invalidDateTimeMessage
-        errorMsg = text ? { text, type: 'error' } : undefined
-      }
     }
     return {
       iso: undefined,
       calendarSelectedDate: undefined,
       dateInputText: dateStr ? dateStr : '',
-      message: errorMsg,
       renderedDate: DateTime.now(this.locale(), this.timezone()),
       dateInputTextChanged: false
     }
@@ -256,30 +248,20 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     // timeout is needed here because handleDayClick could be called in the same
     // frame, and it updates calendarSelectedDate which is read in here.
     window.setTimeout(() => {
-      // update state based on the DateInput's text value
-      if (
-        this.state.dateInputTextChanged ||
-        (event as React.KeyboardEvent).key === 'Enter'
-      ) {
+      if ((event as React.KeyboardEvent).key === 'Enter') {
+        // user pressed enter, use the selected value in the calendar
+        this.updateStateBasedOnDateInput(this.state.calendarSelectedDate, event)
+      } else {
+        // user clicked outside/tabbed away/pressed esc, try to use the value in dateInputText
         const dateParsed = this.tryParseDate(this.state.dateInputText)
         this.updateStateBasedOnDateInput(dateParsed, event)
-      } else {
-        // user clicked outside or tabbed away or pressed esc, reset text
-        this.setState({
-          dateInputText: this.state.iso
-            ? this.state.iso.format(this.dateFormat)
-            : '',
-          calendarSelectedDate: this.state.iso
-            ? this.state.iso.clone()
-            : undefined
-        })
       }
       this.setState({ isShowingCalendar: false, dateInputTextChanged: false })
     }, 0)
   }
 
   updateStateBasedOnDateInput(
-    dateParsed: Moment | null,
+    dateParsed: Moment | null | undefined,
     event: SyntheticEvent
   ) {
     let newState
@@ -316,34 +298,39 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     event: SyntheticEvent,
     option: { value?: string; inputText: string }
   ) => {
-    let newValue: string | undefined
-    if (this.state.iso) {
-      newValue = option.value
-    } else {
-      // if no date is set just return the input text, it will error
-      newValue = option.inputText
-    }
+    // this.state.iso is undefined if date is invalid or not set.
+    // in this case recalculate with the dateInput's text which will result in
+    // an empty valid date (if isRequired is false) or an invalid date.
+    const newValue = this.state.iso ? option.value : this.state.dateInputText
     const newState = this.recalculateState(newValue, true, false)
-
     this.changeStateIfNeeded(newState, event)
     this.setState({ timeSelectValue: option.value })
   }
 
   changeStateIfNeeded = (newState: DateTimeInputState, e: SyntheticEvent) => {
-    this.setState({ message: newState.message })
-    if (!newState.iso && !this.state.iso) {
-      return
-    }
+    const dateStr = newState.dateInputText
     if (
-      !this.state.iso ||
-      !newState.iso ||
-      !this.state.iso.isSame(newState.iso)
+      (this.props.isRequired && !newState.iso) ||
+      (dateStr && dateStr.length > 0 && !newState.iso)
     ) {
-      this.setState(newState)
-      if (this.props.onChange) {
-        this.props.onChange(e, newState.iso?.toISOString())
-      }
+      const text =
+        typeof this.props.invalidDateTimeMessage === 'function'
+          ? this.props.invalidDateTimeMessage(dateStr ? dateStr : '')
+          : this.props.invalidDateTimeMessage
+      // eslint-disable-next-line no-param-reassign
+      newState.message = { text: text, type: 'error' }
+    }
+    this.setState(newState)
+    if (this.areDifferentDates(this.state.iso, newState.iso)) {
+      this.props.onChange?.(e, newState.iso?.toISOString())
+    }
+  }
+
+  areDifferentDates = (d1?: Moment, d2?: Moment) => {
+    if (!d1 && !d2) {
+      return false
     }
+    return !d1 || !d2 || !d1.isSame(d2)
   }
 
   handleBlur = (e: SyntheticEvent) => {
@@ -373,8 +360,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     toAlter.add({ days: 1 })
     this.setState({
       calendarSelectedDate: toAlter,
-      renderedDate: toAlter.clone(),
-      dateInputText: toAlter.format(this.dateFormat)
+      renderedDate: toAlter.clone()
     })
   }
 
@@ -390,8 +376,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     toAlter.subtract({ days: 1 })
     this.setState({
       calendarSelectedDate: toAlter,
-      renderedDate: toAlter.clone(),
-      dateInputText: toAlter.format(this.dateFormat)
+      renderedDate: toAlter.clone()
     })
   }
 

package/src/DateTimeInput/props.ts

@@ -176,7 +176,8 @@ type DateTimeInputProps = {
   )[]
   /**
    * Specifies if the input is required (its passed down to the native DOM
-   * elements).
+   * elements). If its `true` then an empty input will produce an error message
+   * (`invalidDateTimeMessage`)
    */
   isRequired?: boolean
   /**
@@ -232,8 +233,8 @@ type DateTimeInputState = {
   // the date rendered by the opened calendar. Not selected just determines
   // which month/year to show
   renderedDate: Moment
-  // The value currently displayed in the dateTime component.
-  // Just the time part is visible
+  // The value currently displayed in the dateInput component.
+  // Just the date part is visible
   dateInputText: string
   // The value currently displayed in the timeSelect component as ISO datetime
   timeSelectValue?: string