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.

15 thoughts on “Tip #827: Restricting date picker on portal forms

  1. sushma says:

    Where I can register this script on form?

  2. Venky says:

    miDate() and maxDate() worked for me.

  3. Luke says:

    Using the following code, forces the month and the day header columns into Chinese text the first time the date picker is selected…

    $(document).ready(function() {
    $(“#adv_requestedterminationdate”) // input control
    .next() // the date picker container
    .data(“DateTimePicker”) // the date picker object
    .minDate(moment().add(7,’days’))
    });

    Any thoughts

  4. Surya says:

    maxDate(moment()) is working, but thanks for this good article

  5. shivanshu sharma says:

    Is there a way to disable weekends also.
    I have tried
    $(‘#datefieldId’).datetimepicker(‘setDaysOfWeekDisabled’, [0,6]); but that is not working.

  6. Rob says:

    Not all properties and options seem to be available. e.g. Title, minViewMode etc.

  7. Michel Mamula says:

    Is there a way to disable textual input for date? As user will still be able to manually enter the past date even when they can’t select it in Date picker?

Leave a Reply

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