Power Pages: Disable Future Date Selection

Problem Statement

Sometimes you need to restrict portal users from selecting dates beyond a certain range, such as by allowing them to select dates only up to 30 days from today or blocking all future dates.

Solution

You can use the Bootstrap maxdate 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").maxDate(moment(todayDate));
}); 

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

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

Demo

For demonstration, today’s date is March 30, 2023, and if I try selecting the date after April 29, 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!