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.
https://northwalker.github.io/vue-hotel-datepicker/
v1.0.0: Document
Use npm
or yarn
for installation
source-shell
$ npm install @northwalker/vue-hotel-datepicker
# OR
$ yarn add @northwalker/vue-hotel-datepicker
Method 1: Import component in .vue
file
text-html-vue
<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.
text-html-basic
<script type="text/javascript" src="/<your-lib-folder-path>/vue-hotel-datepicker.umd.min.js"></script>
String
'Select a date range'
The input placeholder text
String
'YYYY-MM-DD'
The date format string.
String
' ~ '
The separator string used between date strings.
Date
or String
undefined
The start date of given date range.
Date
or String
undefined
The end date of given date range.
Date
or String
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
.
Date
or String
or Boolean
false
The end view date. All the dates after this date will be disabled.
Number
0
Minimum nights required to select a range of dates.
Number
0
Maximum nights required to select a range of dates.
Boolean
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.
Array
[]
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.
Array
['Sun.', 'Mon.', 'Tue.', 'Wen.', 'Thu.', 'Fri.', 'Sat.']
zh-tw
: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
A array of strings for week text.
Array
['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct', 'Nov.', 'Dec.']
zh-tw
: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
A array of strings for month text.
String
'From'
zh-tw
: '從'
Text of label “From”.
String
'To'
zh-tw
: '到'
Text of label “To”.
String
'Reset'
zh-tw
: '重設'
Text of button “Reset”
String
'Confirm'
zh-tw
: '確認'
Text of button “Confirm”
String
''
'mobile'
or 'desktop'
or ''
Display in mobile or desktop date picker style version, default will depend on common brower’s width.
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'
}
When a confirm button click, passing the new date range object to parent component (as same as event 'update'
).
when a cancellation button click or occurred, VueHotelDatepicker
will emit an event close
to notify parent component.
when a reset button click or occurred, VueHotelDatepicker
will emit an event reset
to notify parent component.
northwalker/vue-hotel-datepicker
#vuejs #javascript #vue-js