Flight Booking

For a great booking experience a good date picker is essential. The best implementations are contextual and take the intent (what people want to do) and context (where and how are they doing it) into account. Learn how to use and customize the range picker and see how you can add your flavor that matches with the overall experience of your application.

Download and try example

Demo

When building flight booking systems you want to make sure that you set up min & max boundaries for the selectable days. This way you ensure that people can't select dates from the past.

Setting it up on a single input

The range picker can be set up on one or two inputs. If you are building a fully custom experience, you can embed it into your own modal.

Javascript jQuery Angular React Vue 
html<label>
    Range
    <input id="picker" mbsc-input placeholder="Please select..." />
</label>
jsvar min = new Date(),
    max = new Date(min.getFullYear(), min.getMonth() + 6, min.getDate());
                            
mobiscroll.datepicker('#picker', {
    controls: ['calendar'],
    select: 'range',
    min: min,
    max: max
});
Using two inputs

Instead of a single input you can have two, one for Outbound and another for Return.

Javascript jQuery Angular React Vue 
html<label>
    Outbound
    <input id="start" mbsc-input placeholder="Please select..." />
</label>
<label>
    Return
    <input id="end" mbsc-input placeholder="Please select..." />
</label>
jsvar min = new Date(),
    max = new Date(min.getFullYear(), min.getMonth() + 6, min.getDate());
                            
mobiscroll.datepicker('#start', {
    controls: ['calendar'],
    select: 'range',
    startInput: '#start',
    endInput: '#end',
    min: now,
    max: max
});
Not all days have flights

Besides setting min & max boundaries, days without flights should be disabled. These could be single occurrence or recurring dates, like specific weekdays. Setting inRangeInvalid: true allows ranges to contain invalids, it only makes sure that the start and end dates are on valid days. If inRangeInvalid is false, no invalid dates are allowed inside a selection (useful for hotel booking).

Javascript jQuery Angular React Vue 
html<label>
    Outbound
    <input id="start" mbsc-input placeholder="Please select..." />
</label>
<label>
    Return
    <input id="end" mbsc-input placeholder="Please select..." />
</label>
jsmobiscroll.datepicker('#start', {
    controls: ['calendar'],
    select: 'range',
    startInput: '#start',
    endInput: '#end',
    invalid: [
        {
            recurring: {
                repeat: 'weekly',
                weekDays: 'TU,TH'
            },
        },
        new Date(now.getFullYear(), now.getMonth(), 25)
    ],
    inRangeInvalid: true
});
One way or roundtrip

You will probably need to give people the option to select a single date for one way trips. This can be easily accomplished by dynamically setting the select option to 'date'. Toggling with a radio button between 'date'/'range' will switch between single date selection and range selection.

Javascript jQuery Angular React Vue 
document.querySelectorAll('.flight-type').forEach(function (elm) {
    var oneWay = this.value == 'oneway';
    elm.addEventListener('change', function (ev) {
        mobiscroll.getInst(end).setOptions({ disabled: this.value == oneWay });

        if (oneWay) {
            booking.setOptions({
                select: 'date'
            });
        } else {
            booking.setOptions({
                select: 'range'
            });
        }
    });
});;
Alternative to radio buttons

If you don't want to add another control (like a radio button or segmented) to your UI, you can solve the "one way question" with a custom button on the dialog and a little custom logic. The idea is to track if at least one value is selected and dynamically enable the button.

Javascript jQuery Angular React Vue 
var calendar = mobiscroll.datepicker('#picker', {
    controls: ['calendar'],
    select: 'range',
    buttons: ['set', 'cancel', {
        text: 'One way only',
        disabled: true,
        handler: function () {
            var start = calendar.getTempVal()[0];

            calendar.setVal([start, null]);
            calendar.close();
        }
    }],
    onTempChange: function (event, inst) {
        inst.setOptions({
            buttons: [
                'cancel',
                {
                    text: 'One way only',
                    disabled: !inst.getTempVal()[0],
                    handler: function () {
                        var start = calendar.getTempVal()[0];

                        calendar.setVal([start, null]);
                        calendar.close();
                    }
                },
                'set'
            ]
        });
    }
});
Preview in fullscreen

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.