5

vue-hotel-datepicker

A date range picker for Vue 3 that counts nights, enforces stay rules and speaks six languages.

LanguageGitHub npm

Start here

Stay rules

Availability

Calendar limits

Presets

Display

Events

Start here

Sandbox

Switch props on and off and watch the calendar and the code on the right change together.

LayoutGrid linesgridStyleSingle monthshowSingleMonthWeek numbersshowWeekNumbersWeek starts MondaymondayFirstOpen to the rightpositionRightAlways visiblealwaysVisible

HeaderShow yearshowYearYear before monthyearBeforeMonthStop paging after two yearsshowLastDateAvailable

Pricing & rulesSingle-day selectionsingleDaySelectionPeriod dates (weekly stays)showPeriodDatesShow pricesshowPriceShow existing bookingsshowBookingsContent slotshowContentSlotMinimum nights

Reservation

Props

<HotelDatePicker
  :modelValue="true"
  alwaysVisible
/>

Stay

Check-in: —
Check-out: —
Nights: —

Events

Pick a date. Each event the picker emits is listed here.