@northwalker/vue-hotel-datepicker

vue-hotel-datepicker

A pure Vue.js date range picker component without any other dependencies, for hotels date range selection and multi-purpose. Vue hotel datepicker provide date range selecting, minimum and maximum night limitation, custom methods for date restriction, custom date formating and localization support.

Demo

Live demo(Github page)

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

Desktop capture preview

Mobile capture preview

Previous version

v1.0.0: Document

Installation

Use npm or yarn for installation

$ npm install @northwalker/vue-hotel-datepicker
# OR
$ yarn add @northwalker/vue-hotel-datepicker

Usage

Method 1: Import component in .vue file

<template>
  <VueHotelDatepicker />
</template>

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

Method 2: Via static javascript in html file

Download this repo and copy file /lib/vue-hotel-datepicker.umd.min.js to /<your-lib-folder-path>/, and add below code to your html file.

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

Props/Options

placeholder

• Type: String
• Default: 'Select a date range'

The input placeholder text

format

• Type: String
• Default: 'YYYY-MM-DD'

The date format string.

separator

• Type: String
• Default: ' ~ '

The separator string used between date strings.

startDate

• Type: Date or String
• Default: undefined

The start date of given date range.

endDate

• Type: Date or String
• Default: undefined

The end date of given date range.

minDate

• Type: Date or String
• Default: today midnight.

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.

maxDate

• Type: Date or String or Boolean
• Default: false

The end view date. All the dates after this date will be disabled.

minNight

• Type: Number
• Default: 0

Minimum nights required to select a range of dates.

maxNight

• Type: Number
• Default: 0

Maximum nights required to select a range of dates.

selectForward

• Type: Boolean
• Default: false

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.

disabledDates

• Type: Array
• Default: []

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.

weekList

• Type: Array
• Default: ['Sun.', 'Mon.', 'Tue.', 'Wen.', 'Thu.', 'Fri.', 'Sat.']
• Example with i18n zh-tw: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']

A array of strings for week text.

monthList

• Type: Array
• Default: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct', 'Nov.', 'Dec.']
• Example with i18n zh-tw: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

A array of strings for month text.

fromText

• Type: String
• Default: 'From'
• Example with i18n zh-tw: '從'

Text of label "From".

toText

• Type: String
• Default: 'To'
• Example with i18n zh-tw: '到'

Text of label "To".

resetText

• Type: String
• Default: 'Reset'
• Example with i18n zh-tw: '重設'

Text of button "Reset"

confirmText

• Type: String
• Default: 'Confirm'
• Example with i18n zh-tw: '確認'

Text of button "Confirm"

mobile

• Type: String
• Default: ''
• value: 'mobile' or 'desktop' or ''

Display in mobile or desktop date picker style version, default will depend on common brower's width.

Events

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.

License

MIT License

Copyright © 2019 Northwalker