A pure Javascript date range picker for hotels.
DownloadInstall with:
npm i hotel-datepicker
Then import the modules with:
import * as fecha from "fecha"; import HotelDatepicker from "hotel-datepicker"; import "hotel-datepicker/dist/css/hotel-datepicker.css";
Download Fecha (4.0.0 or above) and the Hotel Datepicker repository from Github. Then include the files in your page:
<link href="/path/to/hotel-datepicker.css" rel="stylesheet"> <script src="/path/to/fecha.js"></script> <script src="/path/to/hotel-datepicker.min.js"></script>"
←/→
Move backward (left) and forward (right) by one
day.
↑/↓
Move backward (up) and forward (down) by one
week.
PGUP/PGDN
Switch months.
HOME/END
Go to the first or last day of a week.
↵
Select the date in focus.
ESC
Return to the date input field.
Default settings with a predefined value in the input
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input);
Default settings with an empty input
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input);
Inline mode
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { inline: true, clearButton: true });
Inline mode with bottom bar and submit button
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { inline: true, clearButton: true submitButton: true, topbarPosition: 'bottom', submitButtonName: 'name_of_submit_button' });
Custom format: DD-MM-YYYY
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { format: 'DD-MM-YYYY' });
Start of week: monday
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { startOfWeek: 'monday' });
Mininum number of nights: 7
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { minNights: 7 });
Mininum number of nights:
7, 14, 21, 28, etc
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { minNights: 7 minNightsMultiple: true });
Maximum number of nights: 5
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { maxNights: 5 });
Range between 4
and 8
nights
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { minNights: 4, maxNights: 8 });
Don't allow ranges before custom date:
Don't allow ranges after custom date:
Don't allow selections in both directions (first click = first date, second click = second date)
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { selectForward: true });
Disable some dates:
Disable some dates but allow the checkout in those
dates.
Disable specific days of week
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { disabledDaysOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] });
Disable check-in on specific days of week
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { noCheckInDaysOfWeek: ['Monday', 'Tuesday'] });
Disable check-out on specific days of week
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { noCheckOutDaysOfWeek: ['Saturday', 'Sunday'] });
Allow check-in and check-out on Saturday only
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { noCheckInDaysOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Sunday'], noCheckOutDaysOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Sunday'] });
Don't close the datepicker after selection
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { autoClose: false });
Use datepicker in another language (italian)
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { format: 'dddd D MMM YYYY', startOfWeek: 'monday', i18n: { selected: 'Il tuo soggiorno:', night: 'Notte', nights: 'Notti', button: 'Chiudi', clearButton: 'Cancella', submitButton: 'Invia', 'checkin-disabled': 'Check-in disabilitato', 'checkout-disabled': 'Check-out disabilitato', 'day-names-short': ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'], 'day-names': ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'], 'month-names-short': ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'], 'month-names': ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'], 'error-more': 'L\'intervallo di date non deve avere più di 1 notte', 'error-more-plural': 'L\'intervallo di date non deve avere più di %d notti', 'error-less': 'L\'intervallo di date non deve avere meno di 1 notte', 'error-less-plural': 'L\'intervallo di date non deve avere meno di %d notti', 'info-more': 'Per favore seleziona un intervallo di date maggiore di 1 notte', 'info-more-plural': 'Per favore seleziona un intervallo di date maggiore di %d notti', 'info-range': 'Per favore seleziona un intervallo di date tra %d e %d notti', 'info-range-equal': 'Per favore seleziona un intervallo di %d notti', 'info-default': 'Per favore seleziona un intervallo di date', 'aria-application': 'Calendario', 'aria-selected-checkin': 'Data selezionata come check-in, %s', 'aria-selected-checkout': 'Data selezionata come check-out, %s', 'aria-selected': 'Data selezionata, %s', 'aria-disabled': 'Non disponibile, %s', 'aria-choose-checkin': 'Scegli %s come data del check-in', 'aria-choose-checkout': 'Scegli %s come data del check-out', 'aria-prev-month': 'Muovi indietro per visualizzare il mese precedente', 'aria-next-month': 'Muovi in avanti per visualizzare il mese successivo', 'aria-close-button': 'Chiudi il datepicker', 'aria-clear-button': 'Cancella le date selezionate', 'aria-submit-button': 'Invia il form' } });
Click the button to destroy the datepicker
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input); var destroyButton = document.getElementById('destroy-button'); destroyButton.addEventListener('click', destroyDatepicker); function destroyDatepicker() { datepicker.destroy(); }
Don't show the top bar
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { showTopbar: false });
Disable check-in or check-out on some dates. Check-in
disabled on: . Check-out
disabled on
.
Move both months when clicking on the next/prev month button
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { moveBothMonths: true });
Run a function when the datepicker closes
var input = document.getElementById('input-id'); input.addEventListener('afterClose', function () { console.log('Closed!'); }, false);
Click the button to open the datepicker
var datepicker = new HotelDatepicker(document.getElementById('input-id')); var open_datepicker_button = document.getElementById('open-datepicker'); open_datepicker_button.addEventListener('click', open_datepicker_function); function open_datepicker_function() { console.log('Open!'); datepicker.open(); }
Run a custom function when a date range is selected
var input = document.getElementById('input-id'); var datepicker = new HotelDatepicker(input, { onSelectRange: function() { console.log('Date range selected!') } });
Show extra text in day cells
var demo29 = new HotelDatepicker(document.getElementById("demo29"), {
extraDayText: function (date, attributes) {
if (date === fecha.format(testDate, "YYYY-MM-DD") && attributes.class.includes("datepicker__month-day--visibleMonth")) {
return "$150";
}
},
);