Tip #1445: Date picker in Power Pages revisited

The product has been renamed at least twice since we talked last time about how to restrict the date picker control in now Power Pages. But most importantly that code, according to some reports, no longer works. Fear not, here’s the revised version that works perfectly well in Power Pages (it did 5 minutes ago, anyway).

In this example we have two date controls. We want to restrict the first one to the future dates only and the second one to give us interval of no more than two weeks.

Add the following script to the page containing the form.

function getDatePicker(name) {
    // return the datepicker for the given column name
    return $('#' + name)

function initDates(from, to) {
    console.log('initDates', from, to);
    // default FROM is today
    var fromDate = from || moment().startOf('day');
    // default required is in 7 days
    var toDate = to || fromDate.clone().add(7, 'days');

function dateonchange() {
    var pickerFrom = getDatePicker('enabler_datesubmitted');
    var pickerTo = getDatePicker('enabler_daterequired');
    var from = pickerFrom.date();

    // no past FROM date
    // force TO date between the next day and 2 weeks
    if (from && from.isValid()) {
        var fromplusone = from.clone().add(1, 'days');
        var fromplus14 = from.clone().add(2, 'weeks');
    else {

$(document).ready(function () {
            function (e) { dateonchange(); })

And this CSS to fine-tune the accessibility:

 .day.disabled > button {
    text-decoration: line-through;
    cursor: not-allowed;
    color: lightgrey;

The end result: first control only allows selection from today onwards and the second one is restricted from tomorrow until two weeks from now.

The image shows two date picker calendars side by side. The left one is labeled "Date Submitted" with the date March 4, 2024, highlighted in red and pointed at with a red arrow, indicating selection. The right calendar is labeled "Date Required" with the date March 11, 2024, circled in red and also pointed at with a red arrow, indicating another selection. Both calendars display the month of March 2024, with days of the week labeled from Sunday to Saturday on the top. The "Date Required" calendar is slightly faded compared to the "Date Submitted" calendar, suggesting a sequential relationship or a restriction where the "Date Required" must be after the "Date Submitted".

Leave a Reply

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