Hotel Datepicker

A pure Javascript date range picker for hotels.

Download

Installation

As a module:

Install 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";

As a script:

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>"

Keyboard Shortcuts

←/→Move backward (left) and forward (right) by one day.
↑/↓Move backward (up) and forward (down) by one week.
PGUP/PGDNSwitch months.
HOME/ENDGo to the first or last day of a week.
↵Select the date in focus.
ESCReturn to the date input field.

Demo

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";
        }
    },
);