vue-hotel-datepicker

Install

Requires Vue 3. Vue 2 projects should stay on vue-hotel-datepicker@4.

npm install vue-hotel-datepicker

import HotelDatePicker from 'vue-hotel-datepicker'
import 'vue-hotel-datepicker/dist/vueHotelDatepicker.css'

export default {
  components: { HotelDatePicker },
}

<HotelDatePicker :modelValue="true" />

modelValueBooleandefault false

The v-model prop. Controls the visibility of the date picker. Breaking change since v4, where it was value.

alwaysVisibleBooleandefault false

Shows the calendar in the page without needing to click the input.

bookingsArraydefault []

Existing bookings to draw on the calendar. See Bookings below.

closeDatepickerOnClickOutsideBooleandefault true

Closes the date picker when the user clicks outside it. Set to false to control it with the methods below.

disableCheckoutOnCheckinBooleandefault false

Disables check-out on the same day as check-in. Try it

disabledDatesArraydefault []

Strings in YYYY-MM-DD format. Every date in the list is disabled. Try it

disabledDaysOfWeekArraydefault []Deprecated · Use disabledWeekDays instead.

Day names to disable, such as Monday. Depends on the translated names.

disabledWeekDaysObjectdefault {}

Keys sunday to saturday. A value of true disables that weekday; false enables it. Try it

displayClearButtonBooleandefault true

Shows a clear button at the right of the input once dates are set.

enableCheckoutBooleandefault false

Allows check-out on a disabled date. Try it

endDateDate | String | Numberdefault Infinity

The last selectable date. Everything after it is disabled. Try it

endingDateValueDatedefault null

The initial check-out date. Try it

firstDayOfWeekNumberdefault 0

Sunday is 0, Monday is 1, up to Saturday as 6. Set the matching order in i18n.day-names too.

formatStringdefault 'YYYY-MM-DD'

The date format, using dayjs tokens. Try it

gridStyleBooleandefault true

When false, hides the grid lines around days.

halfDayBooleandefault true

Allows check-in at noon on the day a previous booking checks out before noon. Try it

hoveringTooltipBoolean | Functiondefault true

Shows a tooltip with the number of nights while hovering a date.

i18nObjectdefault English

Translations for the picker. See Translations below.

lastDateAvailableNumber | Datedefault Infinity

Stops calendar pagination after the month of this date.

maxNightsNumberdefault null

The longest selectable stay. 0 or null means no limit. Try it

minNightsNumberdefault 1

The shortest selectable stay. Try it

periodDatesArraydefault []

Periods with their own minimum stay, type or price. See Period dates below.

positionRightBooleandefault false

Opens the calendar to the right of the input.

priceDecimalsNumberdefault 0

Decimals shown in prices for weekly periods.

priceSymbolStringdefault ''

Symbol placed before the price when showPrice is on and a period has a price.

showPriceBooleandefault false

Displays the price of each period from periodDates.

showSingleMonthBooleandefault false

Displays one month instead of two.

showWeekNumbersBooleandefault false

Displays ISO week numbers.

showYearBooleandefault true

Shows the year next to the month name.

singleDaySelectionBooleandefault false

Selects one day instead of a range. Try it

startDateDate | Stringdefault new Date()

The first selectable date. Everything before it is disabled.

startingDateValueDatedefault null

The initial check-in date. Try it

tooltipMessageStringdefault null

Replaces the default “X nights” tooltip. Accepts HTML. Try it

yearBeforeMonthBooleandefault false

Puts the year before the month. Only applies when showYear is true.

Period dates

Give date ranges their own minimum stay, period type or price. Weekly periods only allow check-out on their weekday, and their minimumDuration is counted in weeks.

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,
  },
]

Turn on “Period dates” in the sandbox

Bookings

Draws existing bookings on the calendar. Clicking one emits booking-clicked.

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' },
  },
]

Events

Methods

To open or close the picker from your own button, set closeDatepickerOnClickOutside to false and call these methods through a template ref.

Translations

Pass an object to i18n. Bundled locales in this repo: Portuguese, French, English, Spanish (Spain and Latin America) and Italian. These are the English defaults:

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.',
  },
}