📅 Setting Minimum and Maximum Dates for a Calendar Widget

When using the calendar element on a form in Slate, you may wish to restrict the available date options. There's a recipe for excluding holidays in the Knowledgebase, but what if you want to set start and end dates?

The calendar is a JQuery UI Datepicker element, so we can use some built-in options:

• https://api.jqueryui.com/datepicker/#option-minDate

• https://api.jqueryui.com/datepicker/#option-minDate

Try this in the Edit Scripts / Styles section of your form.

Be sure to update field_key to match your datepicker field’s export key!

// Set minimum date to one week from now and maximum date to 02/01/2020
Form.getQuestion('field_key').find('.hasDatepicker').datepicker("option", {
    "minDate": "+1w",
    "maxDate": "02/01/2020"
});

// Set minimum date to one week from now and maximum date to two months and one week from now
Form.getQuestion('field_key').find('.hasDatepicker').datepicker("option", {
    "minDate": "+1w",
    "maxDate": "+2m +1w"
});

It's perfectly fine to combine options, such as a beforeShowDay function (for holiday) and minDate and maxDate. Just separate the options with commas:

Form.getQuestion('field_key').find('.hasDatepicker').datepicker("option", {
    // Set minimum date to one week from now and maximum date to two months and one week from now
    "minDate": "+1w",
    "maxDate": "+2m +1w",
    // Exclude all days except Thursday and Friday
    beforeShowDay: function (date) {
        var show = true;
        if (date.getDay() != 4 && date.getDay() != 5) { show = false; }
        return [show];
    }
});