Author: | benitolopez |
---|---|
Views Total: | 120 views |
Official Page: | Go to website |
Last Update: | November 19, 2023 |
License: | MIT |
Preview:

Description:
Hotel Datepicker is a simple, flexible, customizable, accessible, and multilingual date range picker written in pure JavaScript.
Can be used on hotel websites to provide an intuitive interface for users to select their check-in and check-out dates.
How to use it:
1. Import Fecha library (for datetime manipulation) and the Hotel Datepicker.
# NPM $ npm i hotel-datepicker
import * as fecha from "fecha"; import HotelDatepicker from "hotel-datepicker"; import "hotel-datepicker/dist/css/hotel-datepicker.css";
<!-- OR --> <link href="/path/to/css/hotel-datepicker.min.css" rel="stylesheet"> <script src="/path/to/cdn/fecha.min.js"></script> <script src="/path/to/js/hotel-datepicker.min.js"></script>"
2. Attach a default date range picker to the specified input field.
<input id="example" />
const inputField = document.querySelector("#example"); const myDatePicker = new HotelDatepicker(inputField);
3. Customize the date range picker with the following configurations.
const myDatePicker = new HotelDatepicker(inputField,{ // date format format: "YYYY-MM-DD", infoFormat: "YYYY-MM-DD", ariaDayFormat: "dddd, MMMM DD, YYYY", // separator displayed between date strings separator: " - ", // or monday startOfWeek: "sunday", // Or monday // start/end dates startDate: new Date(), endDate: false, // min/max nights required to select a range of dates minNights: 1, maxNights: 0, // allow ranges that are multiples of minNights only minNightsMultiple: false, // true: the second date must be after the first date selectForward: false, // disabled dates disabledDates: [], noCheckInDates: [], noCheckOutDates: [], disabledDaysOfWeek: [], noCheckInDaysOfWeek: [], noCheckOutDaysOfWeek: [], // allows the checkout on a disabled date or not enableCheckout: false, // determine whether to close the date range picker on click outside preventContainerClose: false, // container to hold the date range picker container: "", // animation speed animationSpeed: ".5s", // show a tooltip when hovering a date // or: // hoveringTooltip: function(nights, startTime, hoverTime) { // return nights; // } hoveringTooltip: true, // auto close the date range picker when a date range is selected autoClose: true, // show/hide the toolbar showTopbar: true, // or "bottom" topbarPosition: "top" // move both months when clicking on the next/prev month button moveBothMonths: false, // enable inline mode inline: false, // show the Clear button clearButton: false, // show the Submit button submitButton: false, // the name of the Submit button submitButtonName: '', // trigger a custom function to show extra text in day cells // parameters: date, attributes extraDayText: false, // callback functions onDayClick: false, onOpenDatepicker: false, onSelectRange: false, }),
4. Localize the date range picker.
const myDatePicker = new HotelDatepicker(inputField,{ i18n: { selected: 'Your stay:', night: 'Night', nights: 'Nights', button: 'Close', clearButton: 'Clear', submitButton: 'Submit', '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-range-equal': 'Please select a date range of %d nights', 'info-default': 'Please select a date range', 'aria-application': 'Calendar', 'aria-selected-checkin': 'Selected as check-in date, %s', 'aria-selected-checkout': 'Selected as check-out date, %s', 'aria-selected': 'Selected, %s', 'aria-disabled': 'Not available, %s', 'aria-choose-checkin': 'Choose %s as your check-in date', 'aria-choose-checkout': 'Choose %s as your check-out date', 'aria-prev-month': 'Move backward to switch to the previous month', 'aria-next-month': 'Move forward to switch to the next month', 'aria-close-button': 'Close the datepicker', 'aria-clear-button': 'Clear the selected dates', 'aria-submit-button': 'Submit the form' } }),
5. API methods.
// get value getValue() // set value setValue() // open open() // close close() // get the picker's element getDatePicker() Gets the datepicker DOM element. // set range setRange(d1, d2) // clear value clear() // get the number of nights selected getNights() // destroy the instance destroy()
6. Fire an event when the date range picker is closed.
inputField.addEventListener( "afterClose", function () { console.log("Closed!"); }, false );
Changelog:
v4.7.0 (11/19/2023)
- Add the ability to allow ranges that are multiples of minNights only
v4.6.2 (10/14/2023)
- Maintain class of days with extra text after range selection