vue-hotel-datepicker

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.

Demo

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

Installation

NPM

Install the package:

npm install vue-hotel-datepicker --save

import HotelDatePicker from 'vue-hotel-datepicker'

export default {
  components: {
    HotelDatePicker,
  },
}

<HotelDatePicker />

Props/Options

format

Type: String
Default: YYYY-MM-DD

The date format string.

startDate

Type: Date or String
Default: new Date()

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

startingDateValue

Type: Date
Default: null

The initial value of the start date.

endDate

Type: Date or String or Boolean
Default: false

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

endingDateValue

Type: Date
Default: null

The initial value of the end date.

firstDayOfWeek

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.

minNights

Type: Number
Default: 1

Minimum nights required to select a range of dates.

maxNights

Type: Number
Default: 0

Maximum nights required to select a range of dates.

disabledDates

Type: Array
Default: []

An array of strings in this format: YYYY-MM-DD. All the dates passed to the list will be disabled.

disabledDaysOfWeek

Type: Array
Default: []

An array of strings in this format: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']. All the days passed to the list will be disabled.

allowedRanges

Type: Array
Default: []

An array of numbers. Example: [7,10,14]. After selecting the start date the calendar will be updated only allowing the checkout 7, 10 or 14 days after.

enableCheckout

Type: Boolean
Default: false

If true, allows the checkout on a disabled date.

hoveringTooltip

Type: Boolean or Function
Default: true

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

tooltipMessage

Type: String
Default null

If provided, it will override the default tooltip "X nights" with the text provided. You can use HTML in the string.

singleDateSelection

Type boolean
Default false

showYear

Type boolean
Default false

Shows the year next to the month

closeDatepickerOnClickOutside

Type: boolean
Default: true

displayClearButton

Type: boolean
Default: true

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

i18n

Type: Object

Default:

i18n: {
  night: 'Night',
  nights: 'Nights',
  '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'],
}

API

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

hideDatepicker()

Hide datepicker

showDatepicker()

Show datepicker

toggleDatepicker()

Toggle datepicker

Events

checkInChanged

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

checkOutChanged

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

Credits

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.

dseidl/vue-hotel-datepicker