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, localization support and more
npm install 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.
#### NPM
``bash`
npm install vue-hotel-datepicker
#### PNPM
`bash`
pnpm install vue-hotel-datepicker
#### YARN
`bash`
yarn add vue-hotel-datepicker
`javascript
import HotelDatePicker from 'vue-hotel-datepicker'
import 'vue-hotel-datepicker/dist/vueHotelDatepicker.css';
export default {
components: {
HotelDatePicker,
},
}
`
`html`
| Name | Type | Default | Description |
|--|--|--|--|
|alwaysVisible|Boolean|false|If true shows display calendar in the page without an input.Array
|bookings||[]|If you want to show bookings.Boolean
|closeDatepickerOnClickOutside||true|Closes the date picker when the user clicks outside the date picker.Boolean
|disableCheckoutOnCheckin||false|If set to true, disable checkout on the same date has checkin.Array
|disabledDates||[]|An array of strings in this format: YYYY-MM-DD. All the dates passed to the list will be disabled.Array
|disabledDaysOfWeek||[]| DEPRECATED: An array of strings in this format: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']. All the days passed to the list will be disabled. It depends on the translated names.Object
|disabledWeekDays||{}| An object with the following properties: sunday, monday, tuesday, wednesday, thursday, friday, saturday, the value indicates if that day is disabled (true) or enabled (false).Boolean
|displayClearButton||true|If set to true, displays a clear button on the right side of the input if there are dates set.Boolean
|enableCheckout||false|If true, allows the checkout on a disabled date.[Date, String, Number]
|endDate||Infinity|The end view date. All the dates after this date will be disabled.Date
|endingDateValue||null|The initial value of the end date.Number
|firstDayOfWeek||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.String
|format||'YYYY-MM-DD'|The date format string.Boolean
|gridStyle||true|If false hides the grid around the days.Boolean
|halfDay||true|Allows to have half a day, if you have check in at noon and checkout before noon[Boolean, Function]
|hoveringTooltip||true|Shows a tooltip with the number of nights when hovering a date.Object
|i18n|| see below | Holds the traslation of the date picker.[Number, Date]
|lastDateAvailable||Infinity|Allows to stop calendar pagination after the month of that dateNumber
|maxNights||null|Maximum nights required to select a range of dates. 0 or null for no limit.Number
|minNights||1|Minimum nights required to select a range of dates.Array
|periodDates|| [] | If you want to have specific startAt and endAt period with different duration or price or type of period. See below for more informationBoolean
|positionRight||false|If true shows the calendar on the right of the input.Number
|priceDecimals||0|The price decimals for weekly periods (see periodDates).String
|priceSymbol||''|The price symbol added before the price when showPrice is true and a price has been set in one of the periodDates array items (period).Boolean
|showPrice||false|If set to true, displays a price contains on your periodDates.Boolean
|showSingleMonth||false|If set to true, display one month only.Boolean
|showWeekNumbers||false|If set to true, displays the week numbers.Boolean
|showYear||true|Shows the year next to the month.Boolean
|singleDaySelection||false|When true only one day can be selected instead of a range.[Date, String]
|startDate||new Date()|The start view date. All the dates before this date will be disabled.Date
|startingDateValue||null|The initial value of the start date.String
|tooltipMessage||null|If provided, it will override the default tooltip "X nights" with the text provided. You can use HTML in the string.Boolean
|value||false| The v-model prop, controls the visibility of the date picker.Boolean
|yearBeforeMonth||false| Show the year before the month, only when showYear is true.
`js`
i18n: {
"night": "Night",
"nights": "Nights",
"week": "week",
"weeks": "weeks",
"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",
],
"tooltip": {
"halfDayCheckIn": "Available CheckIn",
"halfDayCheckOut": "Available CheckOut",
"saturdayToSaturday": "Only Saturday to Saturday",
"sundayToSunday": "Only Sunday to Sunday",
"minimumRequiredPeriod": "%{minNightInPeriod} %{night} minimum.",
},
}
- Default: []
If you want to have specific startAt and endAt period with different duration or price or type of period-Key | Type | Description
-------------------------------------|------------|-------------------------
endAt | String | YYYY-MM-DD
startAt | String | YYYY-MM-DD
minimumDuration | Number | Minimum stay (Type: weekly => per_week \| Type: nightly => per night)
periodType | String | nightly, weekly_by_saturday, weekly_by_sunday
price | Float | Price displayed on each day for this period
Example:
`js
periodDates: [
{
startAt: "2020-06-09",
endAt: "2020-07-26",
minimumDuration: 4,
periodType: "nightly"
},
{
startAt: "2020-07-26",
endAt: "2020-09-30",
minimumDuration: 1,
periodType: "weekly_by_saturday"
},
{
startAt: "2020-09-30",
endAt: "2020-11-30",
minimumDuration: 2,
periodType: "weekly_by_sunday",
price: 4000.0
}
],
`####
MinimumDuration with a periodType weekly-~ equals to a weekbookings
If you want to show bookings
- Type: Array
- Default: []Key | Type | Description
-----------------|-------------|-------------------------
checkInDate | String | 'YYYY-MM-DD'
checkOutDate | String | 'YYYY-MM-DD'
style | Object | Style, (see the example)Example:
`js
bookings: [
{
event: true,
checkInDate: "2020-08-26",
checkOutDate: "2020-08-29",
style: {
backgroundColor: "#399694"
}
},
{
event: false,
checkInDate: "2020-07-01",
checkOutDate: "2020-07-08",
style: {
backgroundColor: "#9DC1C9"
}
}
],
`
Methods
⚠️ In order to open/close the datepicker from an external element, such as a button make sure to set closeDatepickerOnClickOutside to false| Name | Description |
|--|--|
|
hideDatepicker | Hides the datepicker
|showDatepicker | Shows the datepicker
|toggleDatepicker| Toggles (shows or hides) the datepickerEvents
| Name | Params enum | Description |
|--|--|--|
|
booking-clicked|MouseEvent, Date, Object|Emitted every time a booking is clicked. The first param is the mouse javascript event, the second is the clicked Date and the third is the clicked booking.
|check-in-changed| | Emitted every time a new check in date is selected with the new date as payload.
|check-out-changed| | Emitted every time a new check out date is selected with the new date as payload.
|clear-selection| | Emitted every time you clicked on clear Date button.
|day-clicked| Date, String, Date\|Number\|String | Emitted every time when day is clicked. The params are clicked: date, format and next disabled date.
|handle-checkin-checkout-half-day| Object | Emitted on [beforeMount, clear-selection, checkout]. Param: Object of checkin-checkout date.
|next-month-rendered| | Emitted every time the next month is rendered.
|period-selected| Event, Date, Date | Emitted every time when a checkOut is clicked. Params: Mouse Event, checkIn, checkOut$3
`js
{
checkInDate: "YYYY-MM-DD",
checkOutDate: "YYYY-MM-DD",
style: {
backgroundColor: "#399694",
}
}
``