Vue Hotel Datepicker Component

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.1 (12/28/2021)

• Bug fixes

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