A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out rules, localisation support and more.

https://krystalcampioni.github.io/vue-hotel-datepicker/

Install the package:

npm install vue-hotel-datepicker --save

import HotelDatePicker from 'vue-hotel-datepicker'

export default {
  components: {
    HotelDatePicker,
  },
}

<HotelDatePicker />

• Type: String
• Default: YYYY-MM-DD

The date format string.

• Type: Date or String
• Default: new Date()

The start view date. All the dates before this date will be disabled.

• Type: Date or String or Boolean
• Default: false

The end view date. All the dates after this date will be disabled.

• Type: Date
• Default: null

The initial check-in date (as if the user selected it).

• Type: Date
• Default: null

The initial check-out date (as if the user selected it).

• Type: Boolean
• Default: false

If true calendar is always open on desktop-size screens.

• Type: Number
• Default: 2

Number of months displayed (only 1 and 2 are supported values).

• Type: Number
• Default: 0

The first day of the week. Where Sun = 0, Mon = 1, ... Sat = 6.

You need to set the right order in i18n.day-names too.

• Type: Array
• Default: []

Minimum nights required to select a range of dates, by date range.

Example:

[
  {start: '2021-01-01', end: '2021-06-30', minNights: 1},
  {start: '2021-07-01', end: '2021-08-31', minNights: 7},
  {start: '2021-09-01', end: '2021-12-31', minNights: 1}
]

• Type: Array
• Default: []

An array of mixed:

• Date objects

• strings in YYYY-MM-DD format

• ranges in format (values can be either Date objects or string in YYYY-MM-DD format):

  {
    start: new Date(),
    end: 'YYYY-MM-DD'
  }

All the dates passed to the list (or in ranges passed to this list) will be disabled.

• Type: Boolean or Function
• Default: true

Shows a tooltip with the number of nights when hovering a date.

• Type: String
• Default null

If provided, it will override the default tooltip ("X nights min." when choosing check-in, "X nights" when choosing check-out) with the text provided. You can use HTML in the string.

• Type boolean
• Default false

Shows the year next to the month

• Type: boolean
• Default: true

• Type: boolean
• Default: true

If set to true, displays a clear button on the right side of the input if there are dates set

• Type: boolean
• Default: false

Is set to true, all dates not matching a price range in priceByDate will be disabled.

• Type: Object

Default:

{
  en: {
    nights: { one: '%{count} night', other: '%{count} nights' },
    minNights: { one: '%{count} night minimum', other: '%{count} nights minimum' },
    'day-names': ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
    'check-in': 'Check-in',
    'check-out': 'Check-out',
    'month-names': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
  },
  fr: {
    nights: { one: '%{count} nuit', other: '%{count} nuits' },
    minNights: { one: '%{count} nuit minimum', other: '%{count} nuits minimum' },
    'check-in': 'Arrivée',
    'check-out': 'Départ',
    'day-names': ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
    'month-names': ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
  }
}

I18n object with multiple languages that completely overrides the default one (see src/i18n.js).

• Type: String
• Default: 'en'

Language code to access translation in the (default or custom) i18n object.

⚠️ In order to open/close the datepicker from an external element, such as a button make sure to set closeDatepickerOnClickOutside to false

Hide datepicker

Show datepicker

Toggle datepicker

Emitted every time a new check in date is selected with the new date as payload

Emitted every time a new check out date is selected with the new date as payload

This component was originally built as a Vue wrapper component for the Hotel Datepicker by @benitolopez. Version 2.0.0 was completely rewritten with Vue, removing the original library, removing some features and introducing others.