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.

Get started with this 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 
<script setup>
const now = new Date()
const min = now
const max = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate())
</script>

<template>
  <MbscDatepicker
    select="range"
    :controls="['calendar']"
    :min="min"
    :max="max"
  />
</template>
Using two inputs

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

Javascript jQuery Angular React Vue 
<script setup>
const now = new Date()
const min = now
const max = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate())

const startInput = ref(null)
const endInput = ref(null)
</script>

<template>
  <MbscDatepicker
    select="range"
    :controls="['calendar']"
    :startInput="startInput"
    :endInput="endInput"
    :min="min"
    :max="max"
  />
  <MbscInput ref="startInput" label="Outbound" placeholder="Please Select..." />
  <MbscInput ref="endInput" label="Return " placeholder="Please Select..." />
</template>
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 
<script setup>
const now = new Date()
const myInvalid = [
  {
    recurring: {
      repeat: 'weekly',
      weekDays: 'TU,TH'
    }
  },
  new Date(now.getFullYear(), now.getMonth(), 25)
]

const startInput = ref(null)
const endInput = ref(null)
</script>

<template>
  <MbscDatepicker
    select="range"
    :controls="['calendar']"
    :startInput="startInput"
    :endInput="endInput"
    :invalid="myInvalid"
    :inRangeInvalid="true"
  />
  <MbscInput ref="startInput" label="Outbound" placeholder="Please Select..." />
  <MbscInput ref="endInput" label="Return " placeholder="Please Select..." />
</template>
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 
<script setup>
const bookingType = ref('round')
</script>

<template>
  <MbscRadioGroup v-model="bookingType">
    <MbscRadio value="round" label="Round trip" />
    <MbscRadio value="oneway" label="One way" />
  </MbscRadioGroup>
  <MbscDatepicker
    :select="bookingType == 'oneway' ? 'date' : 'range'"
    :controls="['calendar']"
  />
</template>
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 
<script setup>
const calendarRef = ref(null)
const booking = ref(null)
const myButtons = ref([
  'cancel',
  {
    disabled: true,
    text: 'One way only'
  },
  'set'
])

function changeTripType() {
  const startDate = calendarRef.value.instance.getTempVal()[0]
  flightButtons.value = [
    'cancel',
    {
      disabled: startDate != undefined,
      handler: () => {
        booking.value = [startDate, null]
        calendarRef.value.instance.close()
      },
      text: 'One way only'
    },
    'set'
  ]
}
</script>

<template>
  <MbscDatepicker
    ref="calendarRef"
    v-model="booking"
    select="range"
    :controls="['calendar']"
    :buttons="myButtons"
    @temp-change="changeTripType"
  />
</template>
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.