Hotel Datepicker

A pure Javascript date range picker for hotels.

Installation

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

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);

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

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

Disable specific days of weeks

var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    minNights: 6,
    disabledDaysOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
});

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.

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',
        '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-default': 'Per favore seleziona un intervallo di date'
    }
});

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 rage selected!')
	}
});