Premise

In this post I’ll discuss about leveraging one of the very important property of the Office Fabric UI’s DatePicker control, restrictedDates. On setting this property, the given dates are grayed out in the control thereby, preventing user selection.

Solution

So, there can be multiple ways to incorporate validations. For dates, say, we can display a message upon selection. However, wouldn’t it be better if we can gray out the validation dates, by default? Thereby, signalling to the users that the given dates are not available and they can directly select the next available date slot. Office UI Fabric’s DatePicker control, supports disabling of given dates, by default.

The DatePicker control accepts calendarProps as one of its props. One of the property of this prop is, restrictedDates, which does the trick.

Code Snippet

The following code snippet dynamically blocks yesterday’s and tomorrow’s date from the DatePicker control.

//restrictedDates blocks the dates from selection
public render(): JSX.Element {
	this.calendarProps = {
		showGoToToday: true,
		strings: null,
		restrictedDates: this._restrictedDates()
	};

	return (
		<div>
			<DatePicker calendarProps={this.calendarProps} label="Date Validtion" isRequired={true} />
		</div>
	);
}

//dynamically selects the dates to block
private _restrictedDates = (): Date[] => {
	const dateAry: Date[] = [],
		currentDate: Date = new Date(Date.now());

	const tomorrowDate: Date = new Date(new Date().setDate(currentDate.getDate() + 1)),
		previousDate: Date = new Date(new Date().setDate(currentDate.getDate() - 1));
	dateAry.push(previousDate);
	dateAry.push(tomorrowDate);

	return dateAry;
}

In the above image, both the dates, 28 & 30 are grayed out from user selection.

Key Takeaways

• A sample code solution, for this example, can be downloaded from GitHub.
• This type of validation is very user friendly.
• The GitHub example has some fancy css! However, core of this example is the same as explained in the code snippet above.
• Reference for the SnowFlakes used in the GitHub’s code example can be found in the project, Pure CSS Snowfall.
• This example was developed during Christmas hence, the SnowFlakes! 😛