Vue hotel datepicker

Vue hotel datepicker – must-have for hotel reservation system

Date picker is a great component for many types of Vue applications. No matter what you are building, be it a registration to the barber system, or a simple vacation planning app, you will probably want a good looking date picker on the front end. If you made a wise choice and chosen Vue for building this type of application, there is a great component you might use. And it is Vue hotel datepicker component.

Even though the name suggests that this date picker is only for hotel systems, actually it is multi-purpose. It has no additional dependencies, is light and easy to use. End-user will be able to select the date range on the calendars.

This is how it looks on a desktop browser:

Vue hotel datepicker component on desktop browser

And if you’ve visiting it with a mobile device, it will look like this:

This is how the Vue datepicker for hotel  looks like on mobile

You can check the component interactively by yourself:

DEMO Check on GitHub


As it was already briefly mentioned previously, Vue hotel datepicker is great for different reasons:

  • It provides date range selection
  • Minimum and maximum night limitation
  • Has custom methods for date restriction
  • Supports date formatting
  • Supports localization

These are the options that component has.

The input placholder text
Type: String
Default: 'Select a date range'
The date format string.
Type: String
Default: 'YYYY-MM-DD'
The separator string used between date strings.
Type: String
Default: ' ~ '
The start date of given date range.
Type: Date or String
Default: undefined
The end date of given date range.
Type: Date or String
Default: undefined
The start view date. All the dates before this date will be disabled. If preset startDate less than minDateminDate will reset to preset startDate.
Type: Date or String
Default: today midnight.
The end view date. All the dates after this date will be disabled.
Type: Date or String or Boolean
Default: false
Minimum nights required to select a range of dates.
Type: Number
Default: 0
Maximum nights required to select a range of dates.
Type: Number
Default: 0
If true, The selection of the second date must be after the first date. If false, you can select a range of dates in both directions.
Type: Boolean
Default: false
An array of strings by props format value, default 'YYYY-MM-DD' (as same as default format). All the dates passed to the list can not be selected as a start and end date.
Type: Array
Default: []
A array of strings for week text.
Type: Array
Default: ['Sun.', 'Mon.', 'Tue.', 'Wen.', 'Thu.', 'Fri.', 'Sat.']
Example with i18n zh-tw['週一', '週二', '週三', '週四', '週五', '週六', '週日']
A array of strings for month text.
Type: Array
Default: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct', 'Nov.', 'Dec.']
Example with i18n zh-tw['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
Text of label “From”.
Type: String
Default: 'From'
Example with i18n zh-tw'從'
Text of label “To”.
Type: String
Default: 'To'
Example with i18n zh-tw'到'
Text of button “Reset”
Type: String
Default: 'Reset'
Example with i18n zh-tw'重設'
Text of button “Confirm”
Type: String
Default: 'Confirm'
Example with i18n zh-tw'確認'
Display in mobile or desktop date picker style version, default will depend on common brower’s width.
Type: String
Default: ''
value: 'mobile' or 'desktop' or ''


updateWhen a new date is selected, VueHotelDatepicker will emit an event update, passing the new date range object to parent component.
Date range Object:
{ start: 'YYYY-MM-DD', end: 'YYYY-MM-DD' }
confirmWhen a confirm button click, passing the new date range object to parent component (as same as event 'update').
closewhen a cancellation button click or occurred, VueHotelDatepicker will emit an event close to notify parent component.
resetwhen a reset button click or occurred, VueHotelDatepicker will emit an event reset to notify parent component.

How to install Vue Hotel Datepicker

There are two options of how you can install it. You can either, user npm or yarn. Npm might be more convenient for you, you can install it with this command:

npm install @northwalker/vue-hotel-datepicker

If you prefer yarn, here is how you can get the component:

yarn add @northwalker/vue-hotel-datepicker

How to use the Vue datepicker for hotel

Using the Vue hotel datepicker is pretty easy. There are two ways you can do so:

1 way

Import the component into your .vue file:

  <VueHotelDatepicker />

import VueHotelDatepicker from '@northwalker/vue-hotel-datepicker'
export default {
  name: 'App'
  components: {
  // ... skip

2 way

Load it as a JavaScript script into your HTML document. From the official GitHub repository, download the code, and copy the /lib/vue-hotel-datepicker.umd.min.js to /<your-lib-folder-path>/. After that, insert it with a script element into your HTML:

<script type="text/javascript" src="/<your-lib-folder-path>/vue-hotel-datepicker.umd.min.js"></script>