@instructure/ui-date-time-input 8.23.1-snapshot.9 → 8.24.1-snapshot.17

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.24.0](https://github.com/instructure/instructure-ui/compare/v8.23.0...v8.24.0) (2022-04-26)
+
+### Bug Fixes
+
+- **ui-date-time-input:** fix Date input to fill container in `DateTimeInput` ([4069706](https://github.com/instructure/instructure-ui/commit/40697060749bb4770120e822ef2b2466279b1497))
+
+### Features
+
+- **ui-date-time-input:** allow to disable dates in the calendar.
+- **ui-date-time-input:** add `rowSpacing` and `colSpacing` props to DateTimeInput ([5e829fa](https://github.com/instructure/instructure-ui/commit/5e829fae6b005f080497818df8b3fff19365aab3))
+
 # [8.23.0](https://github.com/instructure/instructure-ui/compare/v8.22.0...v8.23.0) (2022-04-07)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input

package/es/DateTimeInput/index.js

@@ -50,7 +50,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
     // componentDidMount()
 
     this.context = void 0;
-    this._timeInput = void 0;
     this.ref = null;
 
     this.handleRef = el => {
@@ -142,10 +141,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       }
     };
 
-    this.timeInputComponentRef = node => {
-      this._timeInput = node;
-    };
-
     this.handleShowCalendar = _event => {
       this.setState({
         isShowingCalendar: true
@@ -241,8 +236,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       const parsed = DateTime.parse(dateStr, this.locale(), this.timezone());
 
       if (parsed.isValid()) {
-        var _this$state, _this$_timeInput;
-
         if (doNotChangeTime && this.state.timeSelectValue) {
           // There is a selected time, adjust the parsed date to its value
           const timeParsed = DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
@@ -253,7 +246,30 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
           parsed.date(this.state.iso.date()).month(this.state.iso.month()).year(this.state.iso.year());
         }
 
-        const newTimeSelectValue = (_this$state = this.state) !== null && _this$state !== void 0 && _this$state.timeSelectValue ? this.state.timeSelectValue : (_this$_timeInput = this._timeInput) === null || _this$_timeInput === void 0 ? void 0 : _this$_timeInput.getBaseDate().minute(parsed.minute()).hour(parsed.hour()).toISOString();
+        const newTimeSelectValue = parsed.toISOString();
+
+        if (this.isDisabledDate(parsed)) {
+          let text = typeof this.props.disabledDateTimeMessage === 'function' ? this.props.disabledDateTimeMessage(parsed.toISOString(true)) : this.props.disabledDateTimeMessage;
+
+          if (!text) {
+            text = typeof this.props.invalidDateTimeMessage === 'function' ? this.props.invalidDateTimeMessage(parsed.toISOString(true)) : this.props.invalidDateTimeMessage;
+          }
+
+          errorMsg = text ? {
+            text,
+            type: 'error'
+          } : void 0;
+          return {
+            iso: parsed.clone(),
+            calendarSelectedDate: parsed.clone(),
+            dateInputTextChanged: false,
+            dateInputText: parsed.format(this.dateFormat),
+            message: errorMsg,
+            timeSelectValue: newTimeSelectValue,
+            renderedDate: parsed.clone()
+          };
+        }
+
         return {
           iso: parsed.clone(),
           calendarSelectedDate: parsed.clone(),
@@ -309,6 +325,26 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
 
   get dateFormat() {
     return this.props.dateFormat;
+  }
+
+  isDisabledDate(date) {
+    const disabledDates = this.props.disabledDates;
+
+    if (!disabledDates) {
+      return false;
+    }
+
+    if (Array.isArray(disabledDates)) {
+      for (const aDisabledDate of disabledDates) {
+        if (date.isSame(aDisabledDate, 'day')) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+
+    return disabledDates(date.toISOString());
   } // Called when the user enters text into dateInput
 
 
@@ -369,7 +405,8 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         isOutsideMonth: !date.isSame(renderedDate, 'month'),
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
-        onClick: this.handleDayClick
+        onClick: this.handleDayClick,
+        interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled'
       }, date.format('DD'));
     });
   } // The default weekdays rendered in the calendar
@@ -439,18 +476,21 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
           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;
     return /*#__PURE__*/React.createElement(FormFieldGroup, {
       description: description,
-      colSpacing: "medium",
-      rowSpacing: "small",
       layout: layout,
+      rowSpacing: rowSpacing,
+      colSpacing: colSpacing,
       vAlign: "top",
       elementRef: this.handleRef,
       messages: [...(this.state.message ? [this.state.message] : []), ...(messages || [])]
     }, /*#__PURE__*/React.createElement(DateInput, {
+      display: "block",
       value: this.state.dateInputText,
       onChange: this.handleDateTextChange,
       onBlur: this.handleBlur,
@@ -476,7 +516,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       value: this.state.timeSelectValue,
       onChange: this.handleTimeChange,
       onBlur: this.handleBlur,
-      ref: this.timeInputComponentRef,
       renderLabel: timeRenderLabel,
       locale: locale,
       format: timeFormat,
@@ -489,6 +528,8 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
 
 }, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   layout: 'inline',
+  colSpacing: 'medium',
+  rowSpacing: 'small',
   timeStep: 30,
   messageFormat: _class2.DEFAULT_MESSAGE_FORMAT,
   isRequired: false,

package/es/DateTimeInput/props.js

@@ -42,6 +42,8 @@ const propTypes = {
   messages: PropTypes.arrayOf(FormPropTypes.message),
   messageFormat: PropTypes.string,
   layout: PropTypes.oneOf(['stacked', 'columns', 'inline']),
+  rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
+  colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
   value: controllable(I18nPropTypes.iso8601, 'onChange'),
   defaultValue: I18nPropTypes.iso8601,
   renderWeekdayLabels: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.node])),
@@ -49,7 +51,9 @@ const propTypes = {
   onChange: PropTypes.func,
   dateInputRef: PropTypes.func,
   timeInputRef: PropTypes.func,
-  onBlur: PropTypes.func
+  onBlur: PropTypes.func,
+  disabledDates: PropTypes.oneOfType([PropTypes.func, PropTypes.arrayOf(PropTypes.string)]),
+  disabledDateTimeMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
 };
-const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur'];
+const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage'];
 export { propTypes, allowedProps };

package/lib/DateTimeInput/index.js

@@ -53,7 +53,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
     // componentDidMount()
 
     this.context = void 0;
-    this._timeInput = void 0;
     this.ref = null;
 
     this.handleRef = el => {
@@ -147,10 +146,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       }
     };
 
-    this.timeInputComponentRef = node => {
-      this._timeInput = node;
-    };
-
     this.handleShowCalendar = _event => {
       this.setState({
         isShowingCalendar: true
@@ -246,8 +241,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       const parsed = _DateTime.DateTime.parse(dateStr, this.locale(), this.timezone());
 
       if (parsed.isValid()) {
-        var _this$state, _this$_timeInput;
-
         if (doNotChangeTime && this.state.timeSelectValue) {
           // There is a selected time, adjust the parsed date to its value
           const timeParsed = _DateTime.DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
@@ -259,7 +252,30 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
           parsed.date(this.state.iso.date()).month(this.state.iso.month()).year(this.state.iso.year());
         }
 
-        const newTimeSelectValue = (_this$state = this.state) !== null && _this$state !== void 0 && _this$state.timeSelectValue ? this.state.timeSelectValue : (_this$_timeInput = this._timeInput) === null || _this$_timeInput === void 0 ? void 0 : _this$_timeInput.getBaseDate().minute(parsed.minute()).hour(parsed.hour()).toISOString();
+        const newTimeSelectValue = parsed.toISOString();
+
+        if (this.isDisabledDate(parsed)) {
+          let text = typeof this.props.disabledDateTimeMessage === 'function' ? this.props.disabledDateTimeMessage(parsed.toISOString(true)) : this.props.disabledDateTimeMessage;
+
+          if (!text) {
+            text = typeof this.props.invalidDateTimeMessage === 'function' ? this.props.invalidDateTimeMessage(parsed.toISOString(true)) : this.props.invalidDateTimeMessage;
+          }
+
+          errorMsg = text ? {
+            text,
+            type: 'error'
+          } : void 0;
+          return {
+            iso: parsed.clone(),
+            calendarSelectedDate: parsed.clone(),
+            dateInputTextChanged: false,
+            dateInputText: parsed.format(this.dateFormat),
+            message: errorMsg,
+            timeSelectValue: newTimeSelectValue,
+            renderedDate: parsed.clone()
+          };
+        }
+
         return {
           iso: parsed.clone(),
           calendarSelectedDate: parsed.clone(),
@@ -315,6 +331,26 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
 
   get dateFormat() {
     return this.props.dateFormat;
+  }
+
+  isDisabledDate(date) {
+    const disabledDates = this.props.disabledDates;
+
+    if (!disabledDates) {
+      return false;
+    }
+
+    if (Array.isArray(disabledDates)) {
+      for (const aDisabledDate of disabledDates) {
+        if (date.isSame(aDisabledDate, 'day')) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+
+    return disabledDates(date.toISOString());
   } // Called when the user enters text into dateInput
 
 
@@ -378,7 +414,8 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         isOutsideMonth: !date.isSame(renderedDate, 'month'),
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
-        onClick: this.handleDayClick
+        onClick: this.handleDayClick,
+        interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled'
       }, date.format('DD'));
     });
   } // The default weekdays rendered in the calendar
@@ -450,18 +487,21 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
           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;
     return /*#__PURE__*/_react.default.createElement(_FormFieldGroup.FormFieldGroup, {
       description: description,
-      colSpacing: "medium",
-      rowSpacing: "small",
       layout: layout,
+      rowSpacing: rowSpacing,
+      colSpacing: colSpacing,
       vAlign: "top",
       elementRef: this.handleRef,
       messages: [...(this.state.message ? [this.state.message] : []), ...(messages || [])]
     }, /*#__PURE__*/_react.default.createElement(_DateInput.DateInput, {
+      display: "block",
       value: this.state.dateInputText,
       onChange: this.handleDateTextChange,
       onBlur: this.handleBlur,
@@ -487,7 +527,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       value: this.state.timeSelectValue,
       onChange: this.handleTimeChange,
       onBlur: this.handleBlur,
-      ref: this.timeInputComponentRef,
       renderLabel: timeRenderLabel,
       locale: locale,
       format: timeFormat,
@@ -500,6 +539,8 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
 
 }, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   layout: 'inline',
+  colSpacing: 'medium',
+  rowSpacing: 'small',
   timeStep: 30,
   messageFormat: _class2.DEFAULT_MESSAGE_FORMAT,
   isRequired: false,

package/lib/DateTimeInput/props.js

@@ -55,6 +55,8 @@ const propTypes = {
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
   messageFormat: _propTypes.default.string,
   layout: _propTypes.default.oneOf(['stacked', 'columns', 'inline']),
+  rowSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
+  colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
   value: (0, _controllable.controllable)(_I18nPropTypes.I18nPropTypes.iso8601, 'onChange'),
   defaultValue: _I18nPropTypes.I18nPropTypes.iso8601,
   renderWeekdayLabels: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])),
@@ -62,8 +64,10 @@ const propTypes = {
   onChange: _propTypes.default.func,
   dateInputRef: _propTypes.default.func,
   timeInputRef: _propTypes.default.func,
-  onBlur: _propTypes.default.func
+  onBlur: _propTypes.default.func,
+  disabledDates: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  disabledDateTimeMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func])
 };
 exports.propTypes = propTypes;
-const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur'];
+const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "8.23.1-snapshot.9+11828d0b3",
+  "version": "8.24.1-snapshot.17+0604ec59c",
   "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.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-test-locator": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-test-utils": "8.23.1-snapshot.9+11828d0b3"
+    "@instructure/ui-babel-preset": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-test-locator": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-test-utils": "8.24.1-snapshot.17+0604ec59c"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/emotion": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-a11y-content": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-buttons": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-calendar": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-date-input": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-form-field": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-i18n": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-icons": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-prop-types": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-react-utils": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-testable": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-time-select": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-utils": "8.23.1-snapshot.9+11828d0b3",
+    "@instructure/debounce": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/emotion": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-a11y-content": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-buttons": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-calendar": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-date-input": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-form-field": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-i18n": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-icons": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-prop-types": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-react-utils": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-testable": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-time-select": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-utils": "8.24.1-snapshot.17+0604ec59c",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "11828d0b32844a522d267e189c8bc52aa928843a"
+  "gitHead": "0604ec59c560ca2868fdac84d6f4948f92d38d5b"
 }

package/src/DateTimeInput/README.md

@@ -5,13 +5,19 @@ describes: DateTimeInput
 A DateTimeInput component is used to enter a date-time value. It is built as a composition
 of the [DateInput](#DateInput) and [TimeSelect](#TimeSelect) components.
 
-#### Localization
+The properties of DateTimeInput prefaced with _date_ are passed to the underlying [DateInput](#DateInput)
+(e.g. _dateLabel_ is DateInput's _label_), while the properties prefaced
+with _time_ are forwarded to the underlying
+[TimeSelect](#TimeSelect). Others are either shared by both sub-components (e.g. locale), or
+are unique to DateTimeInput (e.g. description).
+
+### Localization
 
 The component is localized via its `locale` and `timezone` parameters. Both are read from `props`, `context` and from the browser's locale in this priority order. `locale` determines the language and format dates and time are displayed in (e.g. month names, AM/PM or 24-hour format) and the beginning of the week (e.g. Monday in Germany, Sunday in the U.S.) in the dropdown calendar.
 
-#### Examples
+### Examples
 
-A DateTimeInput with `columns` layout and a default value:
+#### A DateTimeInput with `columns` layout and a default value:
 
 ```js
 ---
@@ -21,7 +27,7 @@ render: false
 class Example extends React.Component {
   render () {
     return (
-      <div style= { {height: 350,width: '40em'}}>
+      <div style= { {height: '10rem',width: '40em'}}>
         <DateTimeInput
           description="Pick a date and time"
           datePlaceholder="Choose a date"
@@ -39,7 +45,7 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
-A required DateInput with `stacked` layout that warns if the value in the past:
+#### A required DateInput with `stacked` layout that warns if the value in the past:
 
 ```js
 ---
@@ -69,9 +75,9 @@ class Example extends React.Component {
   render () {
     const text = this.state.value ? new Date(this.state.value).toString() : 'N/A'
     return (
-      <div style={{width: '20em'}}>
+      <div style={{width: '25em'}}>
         <div style={{marginBottom: '1em', fontStyle: 'italic'}}>You entered:<br/>{text}</div>
-        <div style={{height: 350}}>
+        <div style={{height: '14rem'}}>
           <DateTimeInput
             description={<ScreenReaderContent>Pick a date and time</ScreenReaderContent>}
             datePlaceholder="Choose"
@@ -94,7 +100,7 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
-A disabled DateTimeInput:
+#### A disabled DateTimeInput:
 
 ```js
 ---
@@ -115,7 +121,7 @@ render: true
 />
 ```
 
-A DateTimeInput in a different locale and timezone where these are set from the React `context`:
+#### A DateTimeInput in a different locale and timezone where these are set from the React `context`:
 
 ```js
 ---
@@ -126,7 +132,7 @@ class Example extends React.Component {
   render() {
     return (
       <ApplyLocale locale="fr" timezone="Africa/Nairobi">
-        <div style={{ height: 350, width: '40em' }}>
+        <div style={{ height: '12rem', width: '40em' }}>
           <DateTimeInput
             description="Pick a date and time"
             datePlaceholder="Choose a date"
@@ -147,8 +153,67 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
-The properties of DateTimeInput prefaced with _date_ are passed to the underlying [DateInput](#DateInput)
-(e.g. _dateLabel_ is DateInput's _label_), while the properties prefaced
-with _time_ are forwarded to the underlying
-[TimeSelect](#TimeSelect). Others are either shared by both sub-components (e.g. locale), or
-are unique to DateTimeInput (e.g. description).
+#### A `DateTimeInput` with some disabled dates that are supplied via a `string` array:
+
+```js
+---
+example: true
+render: true
+---
+<DateTimeInput
+  description="Pick a date and time"
+  datePlaceholder="Choose a date"
+  dateRenderLabel="Date"
+  timeRenderLabel="Time"
+  invalidDateTimeMessage="Invalid date"
+  disabledDateTimeMessage="Disabled date"
+  prevMonthLabel="Previous month"
+  nextMonthLabel="Next month"
+  defaultValue="2022-04-08T13:30"
+  layout="columns"
+  disabledDates={['2022-04-01T13:30', '2022-04-03T13:30', '2022-04-04T13:30']}
+  locale="en-us"
+  timezone="America/Denver"
+/>
+```
+
+#### A `DateTimeInput` with some disabled dates that are supplied via a `function`:
+
+```js
+---
+example: true
+render: false
+---
+const locale = 'en-us'
+const timezone = 'America/Denver'
+
+class Example extends React.Component {
+  getDisabledDates(isoDateToCheck) {
+    const parsed = moment.tz(isoDateToCheck, [moment.ISO_8601], locale, timezone)
+    const now = moment().locale(locale).tz(timezone)
+    return parsed.isBefore(now)
+  }
+  render() {
+    return (
+      <div style= { {height: '12rem', width: '40em'}}>
+        <DateTimeInput
+          description="Pick a date and time"
+          datePlaceholder="Choose a date"
+          dateRenderLabel="Date"
+          timeRenderLabel="Time"
+          invalidDateTimeMessage={(rawDateValue) => 'Invalid date: ' + rawDateValue}
+          disabledDateTimeMessage={(rawDateValue) => 'Disabled date: ' + rawDateValue}
+          prevMonthLabel="Previous month"
+          nextMonthLabel="Next month"
+          defaultValue="2022-04-08T13:30"
+          layout="columns"
+          disabledDates={this.getDisabledDates}
+          locale={locale}
+          timezone={timezone}
+        />
+    </div>)
+  }
+}
+
+render(<Example />)
+```