Issue in Range - not preventing to pick disabled dates


#1

Hello. Check image please. My initial config sets min-range to 5 days and disabled ‘1/1’ (1st of January)

When user clicks on ‘1/5’ twice, the script picks 5 days back and select 1/1 but shouldn´t.

How could I fix it please?
Thank you


#2

Hey so how are you setting the disable single day, and the selecting 5 days, it looks like a precedence thing, a simple fix would be to write a function to handle if a selected day tries to pick a unavailable day


#3

Yes, currently the minRange works a bit awkward in the case of the calendar Range, because it changes the selection backwards. Also, it does not takes account of invalid dates, when changing the selection.

A possible approach in your case would be to update the invalids dynamically when a start date is selected, so that the next x days are unselectable. Example code:

var invalids = ['w0'];

$('#myrange').mobiscroll().range({
    // ... other settings
    invalid: invalids.slice(),
    onSetDate: function (ev, inst) {
        var i,
            start,
            minDays = 5,
            invalid = inst.settings.invalid;

        if (ev.control == 'calendar') {
            invalid.length = 0;
            // Add constant invalids
            for (i = 0; i < invalids.length; i++) {
                invalid.push(invalids[i]);
            }
            if (ev.active == 'start') {
                start = inst.getVal(true)[0];
                // Add next 4 days to invalids
                for (i = 1; i < minDays - 1; i++) {
                    invalid.push(new Date(start.getFullYear(), start.getMonth(), start.getDate() + i));
                }
            }
            // Redraw the calendar
            inst.redraw();
        }
    }
});

Let me know if this works for you!

Best,
Isti