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:

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

You can check the component interactively by yourself:

DEMO Check on GitHub

Features

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.

Name	Option
placholder The input placholder text	Type: String Default: 'Select a date range'
format The date format string.	Type: String Default: 'YYYY-MM-DD'
separator The separator string used between date strings.	Type: String Default: ' ~ '
startDate The start date of given date range.	Type: Date or String Default: undefined
endDate The end date of given date range.	Type: Date or String Default: undefined
minDate The start view date. All the dates before this date will be disabled. If preset startDate less than minDate, minDate will reset to preset startDate.	Type: Date or String Default: today midnight.
maxDate The end view date. All the dates after this date will be disabled.	Type: Date or String or Boolean Default: false
minNight Minimum nights required to select a range of dates.	Type: Number Default: 0
maxNight Maximum nights required to select a range of dates.	Type: Number Default: 0
selectForward 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
disabledDates 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: []
weekList A array of strings for week text.	Type: Array Default: ['Sun.', 'Mon.', 'Tue.', 'Wen.', 'Thu.', 'Fri.', 'Sat.'] Example with i18n zh-tw: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
monthList 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: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
fromText Text of label “From”.	Type: String Default: 'From' Example with i18n zh-tw: '從'
toText Text of label “To”.	Type: String Default: 'To' Example with i18n zh-tw: '到'
resetText Text of button “Reset”	Type: String Default: 'Reset' Example with i18n zh-tw: '重設'
confirmText Text of button “Confirm”	Type: String Default: 'Confirm' Example with i18n zh-tw: '確認'
mobile 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 ''

Events

Event	Description
update	When 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' }
confirm	When a confirm button click, passing the new date range object to parent component (as same as event 'update').
close	when a cancellation button click or occurred, VueHotelDatepicker will emit an event close to notify parent component.
reset	when 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:

<template>
  <VueHotelDatepicker />
</template>

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

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>