@nivashr/vue-hotel-datepicker

vue-hotel-datepicker

A pure Vue 3 date range picker component without any other dependencies, for hotel date range selection and multi-purpose. It provides date range selecting, minimum and maximum night limitation, disabled dates with selectable check-out days, custom date formatting and localization support. It ships as an inline picker (VueHotelDatepicker) and as a modal (VueHotelDatepickerModal).

The props, events and CSS selectors of 2.3.x are all kept in 3.x, so moving a Vue 2 project to Vue 3 does not require template or CSS changes for this component. 3.1 adds day prices, a legend and half days, and changes two defaults: clicking a free day behind a disabled date and the look of message. See the changelog.

Made and maintained by NIVAS, the digital agency behind the booking sites this datepicker runs on. It started as a fork of northwalker/vue-hotel-datepicker (archived, Vue 2 only).

Live demo

https://nivas.github.io/vue-hotel-datepicker/

Desktop capture preview

Mobile capture preview

Installation

$ npm install @nivashr/vue-hotel-datepicker

Styles are injected by the component itself, there is no separate CSS file to import.

Usage

Method 1: Import the component in a .vue file

<template>
  <VueHotelDatepicker @confirm="onConfirm" />
</template>

<script>
import VueHotelDatepicker from '@nivashr/vue-hotel-datepicker'
// or: import { VueHotelDatepicker, VueHotelDatepickerModal } from '@nivashr/vue-hotel-datepicker'

export default {
  name: 'App',
  components: {
    VueHotelDatepicker
  },
  methods: {
    onConfirm ({ start, end }) {
      // 'YYYY/MM/DD' strings (see `format`)
    }
  }
}
</script>

Method 2: Via script tags in an html file

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/@nivashr/vue-hotel-datepicker@3"></script>
<script>
  const app = Vue.createApp({})
  app.component('VueHotelDatepicker', VueHotelDatepicker.VueHotelDatepicker)
  app.component('VueHotelDatepickerModal', VueHotelDatepicker.VueHotelDatepickerModal)
  app.mount('#app')
</script>

Modal:

<VueHotelDatepickerModal
  :active="showCalendar"
  :startDate="arrival"
  :endDate="departure"
  :disabledDates="unavailableDates"
  @apply="onApply"
  @cancel="showCalendar = false"
/>

The modal never closes itself. The parent owns active and switches it off in its apply / cancel handlers.

Props

Props shared by both components:

VueHotelDatepicker only:

VueHotelDatepickerModal only:

Date strings

Wherever a prop takes a date as a string (startDate, endDate, minDate, maxDate, disabledDates), a date-only ISO string such as '2026-01-25' means that calendar day in the visitor's timezone. Other strings are handed to the Date parser as they are.

Slots

Both components have a legend slot, which replaces the swatches of the legend prop with your own content, and a day slot, rendered under the day number of every day. It replaces the default price element and receives:

<VueHotelDatepicker :prices="prices">
  <template #day="{ price }">
    <small v-if="price !== undefined" :class="{ cheap: price < 90 }">{{ price }} €</small>
  </template>
</VueHotelDatepicker>

The default price element has the class vhd-day-price. The picker gets the class vhd-has-day-content when prices is not empty or the day slot is used.

Events

VueHotelDatepicker:

VueHotelDatepickerModal:

Methods

Available through a template ref:

Development

Requires Node 20.19+ or 22.12+.

$ npm install
$ npm run dev         # demo app with hot reload
$ npm test            # unit tests (vitest)
$ npm run test:unit   # unit tests with coverage
$ npm run lint
$ npm run build:lib   # library -> ./lib
$ npm run build:demo  # demo app for GitHub pages -> ./docs

License

MIT License

Copyright © 2026 NIVAS

Copyright © 2019 Northwalker