Power Pages: Disable Past Date Selection

Problem Statement

There are situations when you need to prevent portal visitors from choosing dates that are outside of a specific range. For example, you might let them choose only today or any future day while restricting all previous dates.

Solution

You can use the Bootstrap mindate function in client-side JavaScript in combination with the Power Pages date picker control.

The following code will block any future date selection:

$(document).ready(function(){
var todayDate = new Date();
$('#arp_startdate').next().data("DateTimePicker").minDate(moment(todayDate));
}); 

The following code will block date selection before 30 days from today:

$(document).ready(function(){
var todayDate = new Date();
todayDate.setDate(todayDate.getDate() - 30);
$('#arp_startdate').next().data("DateTimePicker").minDate(moment(todayDate));
}); 

Demo

For demonstration, today’s date is March 30, 2023, and if I try selecting the date February 28, 2023, it doesn’t allow me to do that.

👍 If you found this article helpful, please give it a like and consider subscribing to my website for more insightful content like this. By subscribing, you’ll stay updated with the latest information and never miss out on valuable insights. Your support keeps us motivated to create more content to serve you better. Thank you for being a part of our community!