@instructure/ui-date-time-input 8.23.1-snapshot.7 → 8.24.0

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

@@ -254,6 +254,29 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         }
 
         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();
+
+        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 +332,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 +412,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 +483,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,
@@ -489,6 +536,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

@@ -260,6 +260,29 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         }
 
         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();
+
+        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 +338,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 +421,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 +494,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,
@@ -500,6 +547,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.7+67fb0a5be",
+  "version": "8.24.0",
   "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.7+67fb0a5be",
-    "@instructure/ui-test-locator": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-test-utils": "8.23.1-snapshot.7+67fb0a5be"
+    "@instructure/ui-babel-preset": "8.24.0",
+    "@instructure/ui-test-locator": "8.24.0",
+    "@instructure/ui-test-utils": "8.24.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/emotion": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-a11y-content": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-buttons": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-calendar": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-date-input": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-form-field": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-i18n": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-icons": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-prop-types": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-react-utils": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-testable": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-time-select": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-utils": "8.23.1-snapshot.7+67fb0a5be",
+    "@instructure/debounce": "8.24.0",
+    "@instructure/emotion": "8.24.0",
+    "@instructure/ui-a11y-content": "8.24.0",
+    "@instructure/ui-buttons": "8.24.0",
+    "@instructure/ui-calendar": "8.24.0",
+    "@instructure/ui-date-input": "8.24.0",
+    "@instructure/ui-form-field": "8.24.0",
+    "@instructure/ui-i18n": "8.24.0",
+    "@instructure/ui-icons": "8.24.0",
+    "@instructure/ui-prop-types": "8.24.0",
+    "@instructure/ui-react-utils": "8.24.0",
+    "@instructure/ui-testable": "8.24.0",
+    "@instructure/ui-time-select": "8.24.0",
+    "@instructure/ui-utils": "8.24.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -51,6 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "67fb0a5bed0138c5152872999bf1138dd2fd8fd7"
+  "sideEffects": false
 }

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 />)
+```

package/src/DateTimeInput/index.tsx

@@ -56,6 +56,8 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
   static allowedProps = allowedProps
   static defaultProps = {
     layout: 'inline',
+    colSpacing: 'medium',
+    rowSpacing: 'small',
     timeStep: 30,
     messageFormat: DateTimeInput.DEFAULT_MESSAGE_FORMAT,
     isRequired: false,
@@ -141,6 +143,28 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
               .minute(parsed.minute())
               .hour(parsed.hour())
               .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' } : undefined
+          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(),
@@ -194,6 +218,22 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     return this.props.dateFormat
   }
 
+  isDisabledDate(date: Moment) {
+    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
   handleDateTextChange = (_event: SyntheticEvent, date: { value: string }) => {
     const dateParsed = this.tryParseDate(date.value)
@@ -406,6 +446,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
           isOutsideMonth={!date.isSame(renderedDate, 'month')}
           label={date.format('D MMMM YYYY')} // used by screen readers
           onClick={this.handleDayClick}
+          interaction={this.isDisabledDate(date) ? 'disabled' : 'enabled'}
         >
           {date.format('DD')}
         </DateInput.Day>
@@ -491,16 +532,19 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
       timezone,
       messages,
       layout,
+      rowSpacing,
+      colSpacing,
       isRequired,
       interaction,
       renderWeekdayLabels
     } = this.props
+
     return (
       <FormFieldGroup
         description={description}
-        colSpacing="medium"
-        rowSpacing="small"
         layout={layout}
+        rowSpacing={rowSpacing}
+        colSpacing={colSpacing}
         vAlign="top"
         elementRef={this.handleRef}
         messages={[
@@ -509,6 +553,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
         ]}
       >
         <DateInput
+          display="block"
           value={this.state.dateInputText}
           onChange={this.handleDateTextChange}
           onBlur={this.handleBlur}

package/src/DateTimeInput/props.ts

@@ -152,6 +152,14 @@ type DateTimeInputProps = {
    * See [FormFieldGroup](#FormFieldGroup) for details.
    **/
   layout?: 'stacked' | 'columns' | 'inline'
+  /**
+   * Controls the spacing between the inputs when they are in a vertical layout.
+   **/
+  rowSpacing?: 'none' | 'small' | 'medium' | 'large'
+  /**
+   * Controls the spacing between the inputs when they are in a horizontal layout.
+   **/
+  colSpacing?: 'none' | 'small' | 'medium' | 'large'
   /**
    * An ISO 8601 formatted date string representing the current date-time
    * (must be accompanied by an onChange prop).
@@ -197,7 +205,7 @@ type DateTimeInputProps = {
    * Called when the date-time value has changed.
    * The passed in parameters are:
    * - *event*: The triggering event (which may be from the underlying
-   * `          DateInput` or `TimeSelect`)
+   *   `DateInput` or `TimeSelect`)
    * - *isoValue*: The new date value in ISO8601 format, undefined if its invalid
    **/
   onChange?: (event: SyntheticEvent, isoValue?: string) => void
@@ -215,6 +223,17 @@ type DateTimeInputProps = {
    * component
    */
   onBlur?: (e: SyntheticEvent) => void
+  /*
+   * Specify which date(s) will be shown as disabled in the calendar.
+   * You can either supply an array of ISO8601 timeDate strings or
+   * a function that will be called for each date shown in the calendar.
+   */
+  disabledDates?: string[] | ((isoDateToCheck: string) => boolean)
+  /**
+   * Error message shown to the user if they enter a date that is disabled.
+   * If not specified the component will show the `invalidDateTimeMessage`.
+   */
+  disabledDateTimeMessage?: string | ((rawDateValue: string) => string)
 }
 
 type DateTimeInputState = {
@@ -264,6 +283,8 @@ const propTypes: PropValidators<PropKeys> = {
   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(
@@ -273,7 +294,15 @@ const propTypes: PropValidators<PropKeys> = {
   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: AllowedPropKeys = [
@@ -293,6 +322,8 @@ const allowedProps: AllowedPropKeys = [
   'messages',
   'messageFormat',
   'layout',
+  'rowSpacing',
+  'colSpacing',
   'value',
   'defaultValue',
   'renderWeekdayLabels',
@@ -300,7 +331,9 @@ const allowedProps: AllowedPropKeys = [
   'onChange',
   'dateInputRef',
   'timeInputRef',
-  'onBlur'
+  'onBlur',
+  'disabledDates',
+  'disabledDateTimeMessage'
 ]
 
 export type { DateTimeInputProps, DateTimeInputState }