![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
hotel-datepicker
Advanced tools
Readme
A pure Javascript date range picker for hotels. Requires Fecha and supports all modern browsers. Check the demo here.
Include files:
<link href="/path/to/hotel-datepicker.css" rel="stylesheet"><!-- Optional -->
<script src="/path/to/fecha.js"></script>
<script src="/path/to/hotel-datepicker.min.js"></script>
Initialize with vanilla JS.
<input id="input-id" type="text">
var hdpkr = new HotelDatepicker(document.getElementById('input-id'), options);
String
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'
(note the ''
). All the dates passed to the list will be disabled.
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
.
Array
[]
An array of strings in this format: 'YYYY-MM-DD'
(note the ''
). All the dates passed to the list will not allow a check-in on that day.
Array
[]
An array of strings in this format: 'YYYY-MM-DD'
(note the ''
). All the dates passed to the list will not allow a check-out on that day.
Array
[]
An array of strings in English: 'Monday'
(note the ''
and the uppercase).
['Monday', 'Tuesday', 'Wednesday']
Element
''
An element for putting the datepicker. If not set, the datepicker will be appended to the parent of the input.
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
true
Close the datepicker after the selection of the second date.
Boolean
false
Move both months when clicking on the next/prev month button.
Function
false
Run a custom function every time a day is clicked:
onDayClick: function() {
console.log('Day clicked!');
}
Function
false
Run a custom function when the datepicker is opened:
onOpenDatepicker: function() {
console.log('Datepicker opened!');
}
Function
false
Run a custom function when a range is selected:
onSelectRange: function() {
console.log('Date range selected!');
}
[BREAK CHANGE] Two new options has been introduced in the v.3: month-names-short
and day-names-short
. Previously, the short day name version ('Sun', 'Mon', 'Tue', etc) was used in the day-names
option. Now, the day-names
option uses the long version.
Object
Default:
i18n: {
selected: 'Your stay:',
night: 'Night',
nights: 'Nights',
button: 'Close',
'checkin-disabled': 'Check-in disabled',
'checkout-disabled': 'Check-out disabled',
'day-names-short': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
'day-names': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
'month-names-short': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
'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 of at least 1 night',
'info-more-plural': 'Please select a date range of at least %d nights',
'info-range': 'Please select a date range between %d and %d nights',
'info-default': 'Please select a date range'
}
This function is called when the picker gets the date range string from the input.
This function is called when the picker sets the input value.
Opens the datepicker.
Closes the datepicker.
Gets the datepicker DOM element.
Sets the date range value.
Clears the datepicker value.
Gets the number of nights selected. Returns 0
otherwise.
Destroys the datepicker.
You can listen for this event when the datepicker closes.
var input = document.getElementById('input-id');
input.addEventListener('afterClose', function () {
console.log('Closed!');
}, false);
Maintained under the Semantic Versioning guidelines.
Hotel Datepicker was initially developed as a fork of jQuery Date Range Picker Plugin by Chunlong. But it was entirely rewritten in the version 2. It is now an independent project.
MIT Copyright (c) 2019 Benito Lopez
FAQs
Date range picker for hotels
The npm package hotel-datepicker receives a total of 985 weekly downloads. As such, hotel-datepicker popularity was classified as not popular.
We found that hotel-datepicker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.