DatePicker Validation

SPFx DatePicker Validation: Prevent Selection

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;
}
DatePicker
DatePicker

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

  • DatePicker Validation Before
  • DatePicker Validation After

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! 😛

One thought on “SPFx DatePicker Validation: Prevent Selection

  1. Hello,
    I have a project which deponds on powerapp and sharepoint. I already started and half through but i got stuck in somewhere which is part of the requirements of the project. So I’m asking you if you could teach me how to do it if you don’t mind and please let me know how much it costs if there is cost. If you don’t mind, i can explain The issues to you If you accept

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.