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 Vue date picker component based on the hotel datepicker by @benitolopez
A Vue component based on the Hotel Datepicker by @benitolopez
https://krystalcampioni.github.io/vue-hotel-datepicker/
Install the package:
npm install vue-hotel-datepicker
import HotelDatePicker from 'vue-hotel-datepicker'
export default {
components: {
HotelDatePicker,
},
}
<HotelDatePicker DatePickerID="01"/>
String
Check-in ► Check-out
The input placeholder textString
' '
The default value of the inputString
YYYY-MM-DD
The date format string.
String
YYYY-MM-DD
The date format string in the info box. If not set, it uses the format
option.
String
►
The separator string used between date strings.
String
sunday
Default start week: sunday
or monday
.
Date
or String
new Date()
The start view date. All the dates before this date will be disabled.
Date
or String
or Boolean
false
The end view date. All the dates after this date will be disabled.
Number
1
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 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. But with a criteria. Let's say we have these disabled dates: 03 April 2020
and 04 April 2020
. With this option enabled, an user can still select the first date (03 April 2020
) for the checkout. But not 04 April 2020
.
String
.5s
The duration (in seconds) of the animation (open/close datepicker).
Boolean
or Function
true
Shows a tooltip when hovering a date. It can be a custom function:
hoveringTooltip: function(nights, startTime, hoverTime) {
return nights;
}
Boolean
true
Show/hide the toolbar.
Boolean
false
Show/hide the close button.
Boolean
true
Close the datepicker after the selection of the second date.
Object
Default:
i18n: {
selected: 'Your stay:',
night: 'Night',
nights: 'Nights',
button: 'Close',
'day-names': ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
'month-names': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
'error-more': 'Date range should not be more than 1 night',
'error-more-plural': 'Date range should not be more than %d nights',
'error-less': 'Date range should not be less than 1 night',
'error-less-plural': 'Date range should not be less than %d nights',
'info-more': 'Please select a date range longer than 1 night',
'info-more-plural': 'Please select a date range longer than %d nights',
'info-range': 'Please select a date range between %d and %d nights',
'info-default': 'Please select a date range'
}
Emited everytime a new date is selected, passing the new date and the previously selected date
Just submit a pull request explaining what you changed :)
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.