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
orString
- Default:
new Date()
The start view date. All the dates before this date will be disabled.
- Type:
Date
orString
orBoolean
- 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 inYYYY-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
orFunction
- 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.
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.