Date range picker component for Vue.js


Let's say that you need a date picker, similar to the ones you find in flight or hotel booking websites, then you can use a Vue.js component to let users pick dates with support for specific criteria, based on Hotel Datepicker. It can display the number of nights selected and allow several useful options like custom check-in/check-out rules, localization support and more.

Take a look at the Live Demo.



To start working with Vue Hotel Datepicker use npm or yarn to install it in your project

npm install vue-hotel-datepicker


yarn add vue-hotel-datepicker

Import it in your project

import HotelDatePicker from 'vue-hotel-datepicker'

Vue.component('HotelDatePicker', HotelDatePicker)

Declare selected properties to set criteria like minimum nights required to select a range of dates or disabled days of the week.

  data () {
    return {
      minNights: 2,
      maxNights: 30,
      disabledDaysOfWeek: ['Sunday'],
      showCloseButton: true

More about props which can be used are available here.

The markup for the is fairly simple. Here we are setting rules for minimum nights required, maximum nights, and no ability to pick on a Sunday (assuming that users cannot book stuff on that day).

<HotelDatePicker DatePickerID="01" 

If you would like to find more about vue-hotel-datepicker, head to the project's repository on GitHub, where you will also find the source code.

This component was originally built as a Vue wrapper component for the Hotel Datepicker by @benitolopez. It diverted from the original implementation though, implementing extra features (e.g. allowedRanges and dummyInputs) and removing others (e.g. topbar)