Frequently Asked Questions about vue-hotel-datepicker

Q: What is vue-hotel-datepicker? A: vue-hotel-datepicker is a responsive date range picker component for Vue.js, designed to enhance scheduling and booking functionalities in web applications.

Q: How do I install vue-hotel-datepicker? A: You can install it using npm, pnpm, or yarn with the command npm install vue-hotel-datepicker, pnpm install vue-hotel-datepicker, or yarn add vue-hotel-datepicker.

Q: Can I customize the appearance of the date picker? A: Yes, you can customize the appearance using various props such as gridStyle, showYear, and yearBeforeMonth.

Q: How do I disable specific dates? A: You can disable specific dates using the disabledDates prop, providing an array of dates in the format YYYY-MM-DD.

Q: Is it possible to display existing bookings on the calendar? A: Yes, you can display existing bookings using the bookings prop. Provide an array of booking objects with checkInDate, checkOutDate, and style properties.

Q: How do I define custom check-in/check-out rules? A: You can define custom check-in/check-out rules using the periodDates prop, allowing you to set minimum durations, period types, and prices for specific date ranges.

Q: Does vue-hotel-datepicker support localization? A: Yes, it supports localization. You can customize the text and date formats using the i18n prop.

Q: Can I use vue-hotel-datepicker to select only a single day instead of a range? A: Yes, you can enable single-day selection by setting the singleDaySelection prop to true.

Q: How can I trigger the datepicker to open or close from an external button? A: Set closeDatepickerOnClickOutside to false and use the showDatepicker(), hideDatepicker(), or toggleDatepicker() methods to control the datepicker’s visibility.

Q: What events are emitted by the component? A: The component emits various events, including booking-clicked, check-in-changed, check-out-changed, clear-selection, and day-clicked, allowing you to implement custom logic based on user interactions.

Q: Can I display week numbers in the calendar? A: Yes, you can display week numbers by setting the showWeekNumbers prop to true.