Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
vue-hotel-datepicker
Advanced tools
A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out rules, localization support and more
A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out rules, localisation support and more.
https://krystalcampioni.github.io/vue-hotel-datepicker/
Install the package:
npm install vue-hotel-datepicker --save
import HotelDatePicker from 'vue-hotel-datepicker'
export default {
components: {
HotelDatePicker,
},
}
<HotelDatePicker />
String
YYYY-MM-DD
The date format string.
Date
or String
new Date()
The start view date. All the dates before this date will be disabled.
Date
null
The initial value of the start date.
Date
or String
or Boolean
false
The end view date. All the dates after this date will be disabled.
Date
null
The initial value of the end date.
Number
0
The first day of the week. Where Sun = 0, Mon = 1, ... Sat = 6.
You need to set the right order in i18n.day-names
too.
Number
1
Minimum nights required to select a range of dates.
Number
0
Maximum nights required to select a range of dates.
Array
[]
An array of strings in this format: YYYY-MM-DD
. All the dates passed to the list will be disabled.
Array
[]
An array of strings in this format: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
. All the days passed to the list will be disabled.
Array
[]
An array of numbers. Example: [7,10,14]
.
After selecting the start date the calendar will be updated only allowing the checkout 7, 10 or 14 days after.
Boolean
false
If true
, allows the checkout on a disabled date.
Boolean
or Function
true
Shows a tooltip with the number of nights when hovering a date.
String
null
If provided, it will override the default tooltip "X nights" with the text provided. You can use HTML in the string.
boolean
false
boolean
false
Shows the year next to the month
Object
Default:
i18n: {
night: 'Night',
nights: 'Nights',
'day-names': ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
'check-in': 'Check-in',
'check-out': 'Check-Out',
'month-names': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
}
Hide datepicker
Show datepicker
Toggle datepicker
Emitted every time a new check in date is selected with the new date as payload
Emitted every time a new check out date is selected with the new date as payload
This component was originally built as a Vue wrapper component for the Hotel Datepicker by @benitolopez. Version 2.0.0 was completely rewritten with Vue, removing the original library, removing some features and introducing others.
FAQs
A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out rules, localization support and more
The npm package vue-hotel-datepicker receives a total of 851 weekly downloads. As such, vue-hotel-datepicker popularity was classified as not popular.
We found that vue-hotel-datepicker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.