Tip #827: Restricting date picker on portal forms

This tip comes directly from none other than Tanguy “The XRM Toolbox” Touzard himself.

It’s super easy to build an entity form and a page to allow editing of the Dynamics 365 records in a portal. But what if we want to restrict a date picker control to a certain range, which could be dynamic, e.g. based on today’s date.

Good news is that the portals use bootstrap framework so we should be able to use properties of the bootstrap date picker to set the range. The challenge is to get the actual control but for the master such as Tanguy, that’s not difficult.

The code that you’d want to add to Custom Javascript field of the entity form would look like the following:

$(document).ready(function() {
   $("#foo_dateofbirth")  // input control
   .next()   // the date picker container
   .data("DateTimePicker") // the date picker object
   .setMaxDate(moment()); // force the past
});

Here we’re forcing the date of birth to be in the past. You can use setMinDate(date) to restrict minimum date allowed as well.

Tweet about this on TwitterShare on Facebook6Share on Google+0

Leave a Reply

Your email address will not be published. Required fields are marked *