Datepicker: Add inValidDay support (#12962)

WordPress · Mar 6, 2019 · 34842b4 · 34842b4
1 parent 410f531
commit 34842b4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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() );
+					} }
 				/>
 			</div>
 		);