rangeEndInvalid

Booking calendars
1

Hello - I’m building a simple reservation calendar for a property we rent. I’m wondering if there’s a equivalent for rangeEndInvalid for start. We can overlap reservations on both the front and end of an existing booking (checkout AM & checkin PM)

I’m using your flightbooking demo as a baseline…

    var booking = $('#demo-flight-booking-type-outbound').mobiscroll().datepicker({
        controls: ['calendar'],                            
        select: 'range',                                   
        display: 'anchored',                               
        startInput: '#demo-flight-booking-type-outbound',  
        endInput: '#demo-flight-booking-type-return',      
        min: min,                                         
        max: max,                                          
        pages: 2,
        inRangeInvalid: false,
        rangeEndInvalid: true,
        rangeStartInvalid: true, // THIS IS WHAT I WOULD NEED
        invalid: [
            '2024-04-16',
            '2024-04-17',
            '2024-04-18',
            '2024-04-19',
           
            
        ]
    }).mobiscroll('getInst');

Thoughts - Is there a better way to accomplish this… or should I just trim the existing reservations by -1 day

2

Hi @Greg,

Currently the datepicker component doesn’t have a built in rangeStartInvalid option, however a similar outcome can be implemented with the help of the lifecycle events and the and updating the invalid option dynamically.

Here are some tips which can help you:

  1. You can use the onActiveDateChange lifecycle event to detect when the start or end dates are selected. Also other lifecycle event can be useful for your implementation, here is a live demo which presents the available lifecycle events.

  2. Use the setOptions method to dynamically update the component options(including the invalid option as well).

In short you can track in the onActiveDateChange if the start date will be selected then update the invalid data to exclude the specific dates which you want to enable. If the selected is changed to the end date you can re-update the invalid values to the previous values.

Let me know if this helps!