Description:
A multi-language, highly-customizable Vue date range picker component based on Hotel Datepicker.
How to use it:
1. Import and register the component.
import HotelDatePicker from 'vue-hotel-datepicker' import 'vue-hotel-datepicker/dist/vueHotelDatepicker.css';
export default {
components: {
HotelDatePicker,
},
}2. Add the date picker component to the template.
<HotelDatePicker/></<HotelDatePicker>
3. Available props to config the hotel date picker.
alwaysVisible: {
type: Boolean,
default: false,
},
/* e.g.
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"
}
}
],
*/
bookings: {
type: Array,
default() {
return []
},
},
closeDatepickerOnClickOutside: {
type: Boolean,
default: true,
},
disableCheckoutOnCheckin: {
type: Boolean,
default: false,
},
disabledDates: {
type: Array,
default() {
return []
},
},
disabledDaysOfWeek: {
type: Array,
default() {
return []
},
},
disabledWeekDays: {
type: Object,
default() {
return {}
},
},
displayClearButton: {
type: Boolean,
default: true,
},
enableCheckout: {
type: Boolean,
default: false,
},
endDate: {
type: [Date, String, Number],
default: Infinity,
},
endingDateValue: {
type: [Date, null],
default: null,
},
firstDayOfWeek: {
type: Number,
default: 0,
},
format: {
type: String,
default: 'YYYY-MM-DD',
},
gridStyle: {
type: Boolean,
default: true,
},
halfDay: {
type: Boolean,
default: true,
},
hoveringTooltip: {
default: true,
type: [Boolean, Function],
},
/* e.g.
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.",
},
}
*/
i18n: {
type: Object,
default: () => i18nDefaults,
},
lastDateAvailable: {
type: [Number, Date],
default: Infinity,
},
maxNights: {
type: [Number, null],
default: null,
},
minNights: {
type: Number,
default: 1,
},
/* e.g.
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
}
],
*/
periodDates: {
type: Array,
default() {
return []
},
},
positionRight: {
type: Boolean,
default: false,
},
priceSymbol: {
type: String,
default: '',
},
showPrice: {
type: Boolean,
default: false,
},
showSingleMonth: {
type: Boolean,
default: false,
},
showYear: {
type: Boolean,
default: true,
},
singleDaySelection: {
type: Boolean,
default: false,
},
startDate: {
type: [Date, String],
default() {
return new Date()
},
},
startingDateValue: {
type: [Date, null],
default: null,
},
tooltipMessage: {
type: [String, null],
default: null,
},
value: {
type: Boolean,
default: true,
},
yearBeforeMonth: {
type: Boolean,
default: false,
},4. API methods.
// hide the date picker showDatepicker() // toggle the date picker toggleDatepicker() // hide the date picker hideDatepicker()
5. Events.
- @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
Preview:
Changelog:
v4.5.0 (09/09/2021)
- previous-month-rendered: it will be emited when the user goes to a previous month.
- check-in-selected: it will be emited when the user clicks on a checkin date. (Is not being trigger when the user selects the same checkin date consecutively).
- Bug fixes.
v4.4.3 (08/09/2021)
- Fixed close icon does not load
v4.4.2 (07/17/2021)
- Price now can be string or float. A new priceDecimals prop is defined
- Adding i18n assets to public
v4.3.1 (06/25/2021)
- Fixed Mobile view Error in render
v4.3.0 (02/13/2021)
- Improved price styling
- Added price currency symbol string, for instance: ‘$’, ‘EUR’. The new prop is priceSymbol, default at empty string
v4.2.0 (02/11/2021)
- Fixed: Disabled dates not updating when new dates are added
v4.1.0 (01/14/2021)
- correct configuration in i18n fecha package
- Italian added on demo (dev) page
- new prop yearBeforeMonth
v3.0.10 (06/10/2020)
- Hotfix for Safari style
Download Details:
Author: krystalcampioni
Live Demo: https://krystalcampioni.github.io/vue-hotel-datepicker/
Download Link: https://github.com/krystalcampioni/vue-hotel-datepicker/archive/master.zip
Official Website: https://github.com/krystalcampioni/vue-hotel-datepicker
Install & Download:
npm install vue-hotel-datepicker