Dynamic update Range max

Booking calendars
1

Hi,

Is it possible to dynamic update Range’s max date after user click a start date?

I want to limit users only can pick the end date within 10 days after they choose the start date.

I tried to set the new max date throw option after I get the start date on onDayChange event.
But the user always stuck in “select start date mode”. Does anyone have same issues?

Thanks.

onDayChange: function (event, inst) {
            // Your custom event handler goes here
            
            var format = 'YYYY/MM/DD';
            console.log(event.active,moment(event.date).format(format));
            switch(event.active){
                case 'start':
                    var min_date = moment(event.date).format(format)
                    var max_date = moment(event.date).add(10,'d');
                    inst.option({
                        // min:min_date,
                        max:max_date
                    });
                    // inst.setVal([min_date,max_date]);
                    // inst.setActiveDate('start');

                break;

                case 'end':
                    console.log(inst.getVal());
                break;
            }
        }
2

Hi there,

Thanks for reaching out!

Yes, it is possible to update dynamically the selectable range with the help of the option method. But this method triggers a re-initialization and that reverts the temporal values(like the selected start date) to their default values. To solve this problem you can use the setVal and the setActiveDate methods to set back the start date value.

Here is an example:

     onDayChange: function (event, instance) {
        if (event.active == 'start') {
            // handele start
            var startDate = event.date;

            instance.option({ // update min and max option dynamically
                min: startDate,
                max: new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 10)
            });

            // because of the reinitialization you will need to set the startdate and the active tab manually back to "normal" values
            instance.setVal([event.date], false, false, true); // set the start value 
            instance.setActiveDate('end') // update to select the end date next
        }

        if (event.active == 'end') {
            // handle end
        }
    }

Let me know if this helps!

3

Hi Szili,

Thanks for your help.

There is a small problem there.

The range component will “flash” one time after I click the start date when I use the “bottom” display mode. And, there is no issue with “bubble” mode.