diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1ec2b397bcea6d..427e5aa90759a2 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -12,6 +12,7 @@ ### New Feature - `Dropdown` now has a `focusOnMount` prop which is passed directly to the contained `Popover`. +- `DatePicker` has new prop `isInvalidDate` exposing react-dates' `isOutsideRange`. ## 7.0.5 (2019-01-03) diff --git a/packages/components/src/date-time/README.md b/packages/components/src/date-time/README.md index c70c8199952b34..1366be83126358 100644 --- a/packages/components/src/date-time/README.md +++ b/packages/components/src/date-time/README.md @@ -60,3 +60,10 @@ Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is display - Type: `bool` - Required: No + +### isInvalidDate + +A callback function which receives a Date object representing a day as an argument, and should return a Boolean to signify if the day is valid or not. + +- Type: `Function` +- Required: No diff --git a/packages/components/src/date-time/date.js b/packages/components/src/date-time/date.js index 7da1bf4f418239..92be3a3970a90a 100644 --- a/packages/components/src/date-time/date.js +++ b/packages/components/src/date-time/date.js @@ -36,7 +36,7 @@ class DatePicker extends Component { } render() { - const { currentDate } = this.props; + const { currentDate, isInvalidDate } = this.props; const momentDate = currentDate ? moment( currentDate ) : moment(); @@ -56,6 +56,9 @@ class DatePicker extends Component { transitionDuration={ 0 } weekDayFormat="ddd" isRTL={ isRTL() } + isOutsideRange={ ( date ) => { + return isInvalidDate && isInvalidDate( date.toDate() ); + } } /> );