Hotel Datepicker

repository·main·Indexed 43 days ago

https://github.com/benitolopez/hotel-datepicker

A responsive JavaScript date range picker version 4.13.0 designed for hotel booking workflows. It supports minimum/maximum night constraints, custom date availability, and requires Fecha 4.0.0 or above. Features include customizable date constraints, localization options, and a programmatic API for managing date ranges and night counts.

Tokens: 1.2K
Snippets: 3
Records: 6
Agent score: 6%

What's inside Hotel Datepicker

Initialize Hotel Datepicker
main
To use the datepicker, create an input element and initialize the HotelDatepicker class by passing the input element and an optional configuration object.
```
<input id="input-id" type="text" />
```
```
var hdpkr = new HotelDatepicker(document.getElementById("input-id"), options);
```
```
var hdpkr = new HotelDatepicker(document.getElementById("input-id"), options);
```
https://github.com/benitolopez/hotel-datepicker/blob/main/README.md
Install Hotel Datepicker
main
You can install Hotel Datepicker as an npm module or include it as a script in your HTML. Note that it requires Fecha version 4.0.0 or above.
As a module
Install via npm:
```
npm i hotel-datepicker
```
Then import the dependencies in your JavaScript file:
```
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+) and include the files in your HTML:
```
<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>
```
```
npm i hotel-datepicker
```
https://github.com/benitolopez/hotel-datepicker/blob/main/README.md
Configure Hotel Datepicker options
main
The HotelDatepicker constructor accepts an options object to customize behavior. Key categories include:
Date Constraints & Selection
- startDate (Date | String): Earliest selectable date. Dates before this are disabled.
- endDate (Date | String | Boolean): Latest selectable date. Dates after this are disabled.
- defaultViewDate (Date | String): The month the calendar initially opens on. Unlike startDate, this does not disable earlier dates.
- minNights (Number): Minimum nights required for a range (default: 1).
- maxNights (Number): Maximum nights allowed (default: 0).
- minNightsMultiple (Boolean): If true, only ranges that are multiples of minNights are allowed.
- selectForward (Boolean): If true, the second date must be after the first.
- disabledDates (Array<String>): Array of 'YYYY-MM-DD' strings to disable.
- noCheckInDates (Array<String>): Array of 'YYYY-MM-DD' strings that cannot be used as check-in dates.
- noCheckOutDates (Array<String>): Array of 'YYYY-MM-DD' strings that cannot be used as check-out dates.
- enableCheckout (Boolean): If true, allows checking out on a date that is otherwise disabled.
Formatting & Localization
- format (String): Date format string (default: YYYY-MM-DD).
- infoFormat (String): Format for the info box (defaults to format).
- ariaDayFormat (String): Format for aria labels.
- separator (String): Separator between date strings.
- startOfWeek (String): 'sunday' or 'monday'.
- i18n (Object): Custom localization object for labels and error messages.
UI & Behavior
- inline (Boolean): Render the datepicker inline.
- container (Element): Element to append the datepicker to.
- autoClose (Boolean): Close after selecting the second date.
- showTopbar (Boolean): Show/hide the toolbar.
- clearButton (Boolean): Show a clear button (requires showTopbar: true).
- submitButton (Boolean): Show a submit button (requires inline: true and showTopbar: true).
- hoveringTooltip (Boolean | Function): Shows a tooltip on hover. Can be a function: function(nights, startTime, hoverTime) { return nights; }.
- extraDayText (Function): Custom text in day cells: `function(date, attributes) { ... }
https://github.com/benitolopez/hotel-datepicker/blob/main/README.md
Use Hotel Datepicker API methods
main
The HotelDatepicker instance provides several methods to control the picker programmatically:
- open(): Opens the datepicker.
- close(): Closes the datepicker.
- getDatePicker(): Returns the datepicker DOM element.
- setRange(d1, d2): Sets the date range value.
- clear(): Clears the selected dates.
- getNights(): Returns the number of nights selected (returns 0 if no range is selected).
- destroy(): Destroys the datepicker instance.
https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

Listen to Hotel Datepicker events

main

You can listen for specific events on the input element used to initialize the datepicker.

`afterClose`

Fired when the datepicker closes.

`afterClear`

Fired when the dates are cleared.

Example:

var input = document.getElementById("input-id");

input.addEventListener("afterClose", function () {
    console.log("Closed!");
}, false);

var input = document.getElementById("input-id");

input.addEventListener(
    "afterClose",
    function () {
        console.log("Closed!");
    },
    false,
);