jQuery MultiDatesPicker for datepicker: Restrict range?

Toni Michel Caubet picture Toni Michel Caubet · Nov 19, 2013 · Viewed 7.8k times · Source

I decided to use this addon for the jQuery UI Datepicker,

Wich seems to work great, for example:

$(function () {
    var today = new Date();
    $('#test').multiDatesPicker({
        dateFormat: "yy-mm-dd",
        addDisabledDates: [today.setDate(1), today.setDate(3)]
    );
});

This allows user to select as many days as he wants except the 1st and the 3rd of current month,

but how could I restrict the user to select dates only greater than a desired date (start) and smaller than another desired date?

I don't see any method for that in their documentation

PD: As a workaround, it ocours to me to create an array with the dates before/after my desired interval, but how could I mark it all? (I mean, how many years should I contempl in this array??)

-EDIT-

Just to test, I am trying to disable the 15 days before and 15 days after from my desired range, like this:

$(function () {
        var start = new Date(2013, 11, 20)
        var end =  new Date(2013, 11, 24)

        console.log(start, end);

        var dissabledDates = [];
        if ( end < start ) {
            alert('Está mal');
        }

        for ( i = 0 ; i < 15 ; i++ ){
            var currentDate = new Date();
            currentDate.setDate( start.getDate() - i );
            dissabledDates[ dissabledDates.length ] = currentDate;
        }
        for ( i = 0 ; i < 15 ; i++ ){
            var currentDate = new Date();
            currentDate.setDate( end.getDate() + i );
            dissabledDates[ dissabledDates.length ] = currentDate;

            console.log(currentDate);
        }


        var today = new Date();
        $('#test').multiDatesPicker({
            dateFormat: "yy-mm-dd",
            addDisabledDates: dissabledDates
        });
    });

And the restriction happens, but, look how the selector looks (note I only restricted 15 days before and after)

enter image description here

so question is: how can I only let user select between my start and end dates?

Answer

Brett Weber picture Brett Weber · Nov 19, 2013

Utilize the base functionality from the jQuery UI datepicker as stated here

$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });

From the API documentation:

Multiple types supported:

Date: A date object containing the minimum date.

Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.

String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.