Date range picker component for Vue.js

vue-hotel-datepicker

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.

Example

Installation

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

npm install vue-hotel-datepicker

Or

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" 
    :minNights="minNights" 
    :maxNights="maxNights" 
    :disabledDaysOfWeek="disabledDaysOfWeek" 
    :showCloseButton="showCloseButton"
    />

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)