### Configure Start of Week

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Sets the first day of the week for the datepicker calendar. This example sets Monday as the start of the week.

```javascript
var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    startOfWeek: 'monday'
});
```

--------------------------------

### Install and Import Hotel Datepicker

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Install the package via npm and import it as an ES module. Ensure you also import the CSS for styling.

```javascript
// Install via npm
// npm i hotel-datepicker

// Import as ES module
import * as fecha from "fecha";
import HotelDatepicker from "hotel-datepicker";
import "hotel-datepicker/dist/css/hotel-datepicker.css";

// Basic initialization
const input = document.getElementById("booking-dates");
const datepicker = new HotelDatepicker(input);
```

--------------------------------

### Install Hotel Datepicker via npm

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

Use this command to install the Hotel Datepicker package using npm.

```bash
npm i hotel-datepicker
```

--------------------------------

### Initialize Datepicker with Start Date

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Set a specific start date for the datepicker's availability.

```javascript
var date = new Date();
date.setDate(date.getDate() + 5);
var codeDemo8 = document.getElementById("code-demo8");
var preDemo8 = document.getElementById("pre-demo8");
var txt = "var input = document.getElementById('input-id');\nvar datepicker = new HotelDatepicker(input, {\n startDate: " + fecha.format(date, "YYYY-MM-DD") + "\n});";
preDemo8.textContent = txt;
codeDemo8.textContent = fecha.format(date, "YYYY-MM-DD");
var demo8 = new HotelDatepicker( document.getElementById("demo8"), {
  startDate: date,
} );
```

--------------------------------

### Initialize Datepicker with Custom Start of Week

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Set the start of the week to Monday for the datepicker.

```javascript
var demo4 = new HotelDatepicker( document.getElementById("demo4"), {
  startOfWeek: "monday",
} );
```

--------------------------------

### Configure Minimum Number of Nights with Multiple Options

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Allows setting multiple minimum night options. This example requires at least 7 nights and enables multiple minimum night selections.

```javascript
var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    minNights: 7,
    minNightsMultiple: true
});
```

--------------------------------

### Configure Minimum Number of Nights

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Sets the minimum number of nights a user must select. This example requires at least 7 nights.

```javascript
var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    minNights: 7
});
```

--------------------------------

### Configure Range Between Minimum and Maximum Nights

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Defines a specific range for the number of nights. This example allows stays between 4 and 8 nights.

```javascript
var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    minNights: 4,
    maxNights: 8
});
```

--------------------------------

### Configure Custom Date Format

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Sets a custom date format for the datepicker display. This example uses 'DD-MM-YYYY'.

```javascript
var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    format: 'DD-MM-YYYY'
});
```

--------------------------------

### Programmatically Open Datepicker

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Call the `open()` method on the datepicker instance to display it programmatically, for example, triggered by a button click.

```javascript
var demo22 = new HotelDatepicker( document.getElementById("demo22") );
var open_datepicker_button = document.getElementById("open-datepicker");
open_datepicker_button.addEventListener(
  "click",
  open_datepicker_function
);
function open_datepicker_function() {
  console.log("Open!");
  demo22.open();
}
```

--------------------------------

### Configure Maximum Number of Nights

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Sets the maximum number of nights a user can select. This example limits stays to a maximum of 5 nights.

```javascript
var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    maxNights: 5
});
```

--------------------------------

### Configure HotelDatepicker with Custom Formatting and Internationalization

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Customize the date format, start of the week, and provide translations for various UI elements and messages using the `i18n` option.

```javascript
var demo14 = new HotelDatepicker( document.getElementById("demo14"), {
 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 di almeno 1 notte",
 "info-more-plural": "Per favore seleziona un intervallo di date di almeno %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",
 }
}
);
```

--------------------------------

### Example of Disabled Dates Array

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

Provide an array of strings representing dates to be disabled. Dates must be in 'YYYY-MM-DD' format.

```javascript
["Monday", "Tuesday", "Wednesday"];
```

--------------------------------

### Disable Specific Days of the Week

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Prevents users from selecting certain days of the week. This example disables Monday through Friday.

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

--------------------------------

### Disable Check-out on Specific Days of the Week

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Restricts check-out to specific days. This example disables check-out on Saturdays and Sundays.

```javascript
var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    noCheckOutDaysOfWeek: ['Saturday', 'Sunday']
});
```

--------------------------------

### Configuring Datepicker UI and Behavior

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Customize the visual appearance and behavior of the datepicker using various configuration options. This includes setting CSS classes, start day of the week, animation speed, and visibility of UI elements.

```javascript
const input = document.getElementById("input-id");

const datepicker = new HotelDatepicker(input, {
    className: "datepicker",        // CSS class prefix
    startOfWeek: "monday",          // "sunday" (default) or "monday"
    animationSpeed: ".5s",          // Open/close animation duration
    showTopbar: true,               // Show/hide the info bar
    topbarPosition: "top",          // "top" or "bottom"
    clearButton: true,              // Show clear button in topbar
    autoClose: true,                // Close after range selection
    preventContainerClose: false,   // Prevent close on outside click
    moveBothMonths: true,           // Move both months with nav buttons
    closeOnScroll: false            // Close datepicker on page scroll
});
```

--------------------------------

### Disable Check-in on Specific Days of the Week

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Restricts check-in to specific days. This example disables check-in on Mondays and Tuesdays.

```javascript
var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    noCheckInDaysOfWeek: ['Monday', 'Tuesday']
});
```

--------------------------------

### Custom Hovering Tooltip Function

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

Configure a custom function for the hovering tooltip. This function receives the number of nights, start time, and hover time, and should return the content for the tooltip.

```javascript
hoveringTooltip: function(nights, startTime, hoverTime) {
    return nights;
}
```

--------------------------------

### Start and End Date Restrictions

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Limit the selectable date range by setting boundary dates. Dates can be provided as JavaScript Date objects or strings in the configured format.

```javascript
const input = document.getElementById("input-id");

// Don't allow bookings before a specific date
const startDate = new Date();
startDate.setDate(startDate.getDate() + 1); // Tomorrow

const datepicker = new HotelDatepicker(input, {
    startDate: startDate  // All dates before this are disabled
});

// Don't allow bookings after a specific date
const endDate = new Date();
endDate.setDate(endDate.getDate() + 90); // 90 days from now

const limitedDatepicker = new HotelDatepicker(input, {
    startDate: new Date(),           // No past dates
    endDate: endDate                 // No dates beyond 90 days
});

// Dates can also be passed as strings in format matching the format option
const stringDatepicker = new HotelDatepicker(input, {
    startDate: "2024-06-01",
    endDate: "2024-12-31"
});
```

--------------------------------

### Initialize Hotel Datepicker with Default Settings

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Use this for basic initialization with default settings. Ensure the input element with id 'input-id' exists.

```javascript
var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input);
```

--------------------------------

### Initialize Hotel Datepicker with Vanilla JS

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

Initialize the Hotel Datepicker by targeting an input element and providing optional configuration.

```html
<input id="input-id" type="text" />
```

```javascript
var hdpkr = new HotelDatepicker(document.getElementById("input-id"), options);
```

--------------------------------

### Initialize Datepicker with Custom Format

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Initialize the datepicker with a custom date format.

```javascript
var demo3 = new HotelDatepicker( document.getElementById("demo3"), {
  format: "DD-MM-YYYY",
} );
```

--------------------------------

### Initialize Datepicker with Multiple Minimum Nights

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Configure minimum nights for both single and multiple bookings.

```javascript
var demo30 = new HotelDatepicker( document.getElementById("demo30"), {
  minNights: 7,
  minNightsMultiple: true,
} );
```

--------------------------------

### UI Configuration Options

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Configure the visual appearance and behavior of the datepicker using various options.

```APIDOC
## UI Configuration Options

Configure the visual appearance and behavior of the datepicker.

```javascript
const input = document.getElementById("input-id");

const datepicker = new HotelDatepicker(input, {
    className: "datepicker",        // CSS class prefix
    startOfWeek: "monday",          // "sunday" (default) or "monday"
    animationSpeed: ".5s",          // Open/close animation duration
    showTopbar: true,               // Show/hide the info bar
    topbarPosition: "top",          // "top" or "bottom"
    clearButton: true,              // Show clear button in topbar
    autoClose: true,                // Close after range selection
    preventContainerClose: false,   // Prevent close on outside click
    moveBothMonths: true,           // Move both months with nav buttons
    closeOnScroll: false            // Close datepicker on page scroll
});
```
```

--------------------------------

### Initialize Datepicker with Min and Max Nights

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Define both minimum and maximum nights for a booking range.

```javascript
var demo7 = new HotelDatepicker( document.getElementById("demo7"), {
  minNights: 4,
  maxNights: 8,
} );
```

--------------------------------

### Initialize Basic Datepicker

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Basic initialization of the datepicker on an input element.

```javascript
var demo2 = new HotelDatepicker( document.querySelector("#demo2-input-parent input") );
```

--------------------------------

### Methods

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

These methods allow programmatic control over the datepicker.

```APIDOC
## Methods

### getValue()

This function is called when the picker gets the date range string from the input.

### setValue()

This function is called when the picker sets the input value.

### open()

Opens the datepicker.

### close()

Closes the datepicker.

### getDatePicker()

Gets the datepicker DOM element.

### setRange(d1, d2)

Sets the date range value.

### clear()

Clears the datepicker value.

### getNights()

Gets the number of nights selected. Returns `0` otherwise.

### destroy()

Destroys the datepicker.
```

--------------------------------

### Configuration Options

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

These options can be used to customize the behavior and appearance of the datepicker.

```APIDOC
## Configuration Options

### animationSpeed

- Type: `String`
- Default: `.5s`

The duration (in seconds) of the animation (open/close datepicker).

### hoveringTooltip

- Type: `Boolean` or `Function`
- Default: `true`

Shows a tooltip when hovering a date. It can be a custom function:

```js
hoveringTooltip: function(nights, startTime, hoverTime) {
    return nights;
}
```

### showTopbar

- Type: `Boolean`
- Default: `true`

Show/hide the toolbar.

### topbarPosition

- Type: `String`
- Default: `top`

Set the position of the toolbar.

### autoClose

- Type: `Boolean`
- Default: `true`

Close the datepicker after the selection of the second date.

### preventContainerClose

- Type: `Boolean`
- Default: `false`

When a click is done outside the datepicker container, the datepicker closes. Use this option to disable this behavior.

### moveBothMonths

- Type: `Boolean`
- Default: `false`

Move both months when clicking on the next/prev month button.

### closeOnScroll

- Type: `Boolean`
- Default: `false`

Close datepicker on scroll. Some devices might trigger the scroll event in an unpredictable way. Use it at your own risk.

### onDayClick

- Type: `Function`
- Default: `false`

Run a custom function every time a day is clicked:

```js
onDayClick: function() {
    console.log('Day clicked!');
}
```

### onOpenDatepicker

- Type: `Function`
- Default: `false`

Run a custom function when the datepicker is opened:

```js
onOpenDatepicker: function() {
    console.log('Datepicker opened!');
}
```

### onSelectRange

- Type: `Function`
- Default: `false`

Run a custom function when a range is selected:

```js
onSelectRange: function() {
    console.log('Date range selected!');
}
```

### extraDayText

- Type: `Function`
- Default: `false`

Run a custom function to show extra text in day cells:

```js
extraDayText: function(date, attributes) {
    if (attributes.class.includes("datepicker__month-day--visibleMonth")) {
        console.log(date);
        console.log(attributes);
        return "<span>$150</span>";
    }
}
```

### i18n

**[BREAK CHANGE]** Two new options has been introduced in the v.3: `month-names-short` and `day-names-short`. Previously, the _short_ day name version ('Sun', 'Mon', 'Tue', etc) was used in the `day-names` option. Now, the `day-names` option uses the _long_ version.

- Type: `Object`

Default:

```js
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'
}
```
```

--------------------------------

### Initialize Datepicker with Select Forward Option

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Enable the 'select forward' option, allowing selection of dates after the current date.

```javascript
var demo10 = new HotelDatepicker( document.getElementById("demo10"), {
  selectForward: true,
} );
```

--------------------------------

### Basic Hotel Datepicker Initialization

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Initialize the datepicker by passing an input element. The input will display the selected date range.

```html
<input id="input-id" type="text" aria-label="Check-in and check-out dates" />
```

```javascript
// Basic usage with default settings
const input = document.getElementById("input-id");
const datepicker = new HotelDatepicker(input);

// The input will display dates in format: "2024-01-15 - 2024-01-18"
// Users can click to open the calendar and select a date range
```

--------------------------------

### Import Hotel Datepicker as a Module

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

Import the necessary modules when using Hotel Datepicker in a JavaScript project.

```javascript
import * as fecha from "fecha";
import HotelDatepicker from "hotel-datepicker";
import "hotel-datepicker/dist/css/hotel-datepicker.css";
```

--------------------------------

### Destroy and Recreate HotelDatepicker Instance

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Demonstrates how to dynamically destroy an existing HotelDatepicker instance and then recreate it. The button text changes to reflect the current state.

```javascript
var demo15 = new HotelDatepicker( document.getElementById("demo15") );
var destroyButton = document.getElementById("destroy-datepicker");
destroyButton.addEventListener("click", destroyDatepicker);

function destroyDatepicker() {
 if (document.getElementById("datepicker-demo15")) {
 demo15.destroy();
 destroyButton.textContent = "Recreate";
 } else {
 demo15 = new HotelDatepicker( document.getElementById("demo15") );
 destroyButton.textContent = "Destroy";
 }
}
```

--------------------------------

### Initialize Datepicker with Minimum Nights

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Set the minimum number of nights required for a booking.

```javascript
var demo5 = new HotelDatepicker( document.getElementById("demo5"), {
  minNights: 7,
} );
```

--------------------------------

### Include Hotel Datepicker via Script Tags

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

Include the Hotel Datepicker and its dependency Fecha using script tags in your HTML.

```html
<link href="/path/to/hotel-datepicker.css" rel="stylesheet" /><!-- Optional -->
<script src="/path/to/fecha.js"></script>
<script src="/path/to/hotel-datepicker.min.js"></script>
```

--------------------------------

### Initialize Inline Datepicker with Submit Button

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Initialize an inline datepicker with a submit button and custom topbar position.

```javascript
var demo25 = new HotelDatepicker( document.getElementById("demo25"), {
  inline: true,
  clearButton: true,
  submitButton: true,
  topbarPosition: "bottom",
  submitButtonName: "name_of_submit_button",
} );
```

--------------------------------

### Initialize Hotel Datepicker in Inline Mode with Bottom Bar and Submit Button

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Enables inline mode with a bottom bar and a submit button. Allows customization of the submit button's position and name.

```javascript
var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    inline: true,
    clearButton: true,
    submitButton: true,
    topbarPosition: 'bottom',
    submitButtonName: 'name_of_submit_button'
});
```

--------------------------------

### Initialize Datepicker with Maximum Nights

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Set the maximum number of nights allowed for a booking.

```javascript
var demo6 = new HotelDatepicker( document.getElementById("demo6"), {
  maxNights: 5,
} );
```

--------------------------------

### API Methods

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Use public methods to programmatically control the datepicker, such as opening, closing, setting ranges, clearing selections, and destroying the instance.

```APIDOC
## API Methods

Use public methods to programmatically control the datepicker.

```javascript
const input = document.getElementById("input-id");
const datepicker = new HotelDatepicker(input);

// Open the datepicker programmatically
document.getElementById("open-btn").addEventListener("click", function() {
    datepicker.open();
});

// Close the datepicker
document.getElementById("close-btn").addEventListener("click", function() {
    datepicker.close();
});

// Set date range programmatically
const checkin = new Date(2024, 6, 15);  // July 15, 2024
const checkout = new Date(2024, 6, 20); // July 20, 2024
datepicker.setRange(checkin, checkout);

// Or with strings (matching format option)
datepicker.setRange("2024-07-15", "2024-07-20");

// Clear the selection
datepicker.clear();

// Get number of nights selected
const nights = datepicker.getNights();  // Returns 0 if no selection
console.log("Selected nights:", nights);

// Get the datepicker DOM element
const datepickerElement = datepicker.getDatePicker();

// Destroy the datepicker completely
datepicker.destroy();
```
```

--------------------------------

### Initialize Hotel Datepicker in Inline Mode

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Configures the datepicker to be displayed inline, always visible. Includes a clear button for resetting selections.

```javascript
var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    inline: true,
    clearButton: true
});
```

--------------------------------

### Initialize Datepicker with Default Values

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Sets the initial value of the datepicker input field with today and tomorrow's dates.

```javascript
var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var input1 = document.querySelector( "#demo1-input-parent input" );
input1.value = fecha.format(today, "YYYY-MM-DD") + " - " + fecha.format(tomorrow, "YYYY-MM-DD");
var demo1 = new HotelDatepicker(input1);
```

--------------------------------

### Include Hotel Datepicker as a Script

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Include the library's CSS and JavaScript files in your HTML when using it as a script. Ensure you download Fecha (4.0.0+) and the Hotel Datepicker repository.

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

--------------------------------

### Custom Date Format Configuration

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Configure the date display format using Fecha library format tokens. This also allows setting custom separators and accessibility formats.

```javascript
const input = document.getElementById("input-id");
const datepicker = new HotelDatepicker(input, {
    format: "DD-MM-YYYY",           // Display format: "15-01-2024"
    infoFormat: "ddd, MMM D",       // Info bar format: "Mon, Jan 15"
    ariaDayFormat: "dddd, MMMM DD, YYYY", // Accessibility format
    separator: " to "               // Separator between dates: "15-01-2024 to 18-01-2024"
});

// Available format tokens:
// YYYY - 4-digit year (2024)
// MM   - 2-digit month (01-12)
// DD   - 2-digit day (01-31)
// ddd  - Short day name (Mon)
// dddd - Full day name (Monday)
// MMM  - Short month name (Jan)
// MMMM - Full month name (January)
```

--------------------------------

### Initialize Datepicker with Disabled Dates

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Configure specific dates that should be disabled in the datepicker.

```javascript
var date1 = new Date();
var date2 = new Date();
var date3 = new Date();
var date4 = new Date();
var date5 = new Date();
var date6 = new Date();
date1.setDate(date1.getDate() + 3);
date2.setDate(date2.getDate() + 6);
date3.setDate(date3.getDate() + 7);
date4.setDate(date4.getDate() + 8);
date5.setDate(date5.getDate() + 11);
date6.setDate(date6.getDate() + 21);
var codeDemo11 = document.getElementById("code-demo11");
var codeDemo12 = document.getElementById("code-demo12");
var preDemo11 = document.getElementById("pre-demo11");
var preDemo12 = document.getElementById("pre-demo12");
var txt = "var input = document.getElementById('input-id');\nvar datepicker = new HotelDatepicker(input, {\n disabledDates: [\n " + "'" + fecha.format(date3, "YYYY-MM-DD") + "'" + ",\n " + "'" + fecha.format(date1, "YYYY-MM-DD") + "'" + ",\n " + "'" + fecha.format(date2, "YYYY-MM-DD") + "'" + ",\n " + "'" + fecha.format(date4, "YYYY-MM-DD") + "'" + ",\n " + "'" + fecha.format(date5, "YYYY-MM-DD") + "'" + ",\n " + "'" + fecha.format(date6, "YYYY-MM-DD") + "'" + "\n ]\n});";
preDemo11.textContent = txt;
var txt = "var input = document.getElementById('input-id');\nvar datepicker = new HotelDatepicker(input, {\n disabledDates: [\n " + "'" + fecha.format(date3, "YYYY-MM-DD") + "'" + ",\n " + "'" + fecha.format(date1, "YYYY-MM-DD") + "'" + ",\n " + "'" + fecha.format(date2, "YYYY-MM-DD") + "'" + ",\n " + "'" + fecha.format(date4, "YYYY-MM-DD") + "'" + ",\n " + "'" + fecha.format(date5, "YYYY-MM-DD") + "'" + ",\n " + "'" + fecha.format(date6, "YYYY-MM-DD") + "'" + "\n ],\n enableCheckout: true\n}";
preDemo12.textContent = txt;
codeDemo11.textContent = "[" + fecha.format(date3, "YYYY-MM-DD") + ", " + fecha.format(date1, "YYYY-MM-DD") + ", " + fecha.format(date2, "YYYY-MM-DD") + ", " + fecha.format(date4, "Y
```

--------------------------------

### Move Both Months Simultaneously

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Set `moveBothMonths` to `true` to synchronize the navigation of both displayed months.

```javascript
var demo18 = new HotelDatepicker( document.getElementById("demo18"), {
  moveBothMonths: true,
} );
```

--------------------------------

### Callback Functions

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Execute custom code when users interact with the datepicker. This includes actions like clicking a day, opening the datepicker, or selecting a date range.

```APIDOC
## Callback Functions

Execute custom code when users interact with the datepicker.

```javascript
const input = document.getElementById("input-id");

const datepicker = new HotelDatepicker(input, {
    // Called when any day is clicked
    onDayClick: function() {
        console.log("Day clicked!");
    },

    // Called when the datepicker opens
    onOpenDatepicker: function() {
        console.log("Datepicker opened!");
    },

    // Called when a complete range is selected
    onSelectRange: function() {
        console.log("Date range selected!");
        console.log("Nights:", datepicker.getNights());
    }
});

// Event listeners for close and clear actions
input.addEventListener("afterClose", function() {
    console.log("Datepicker closed!");
    console.log("Selected range:", input.value);
}, false);

input.addEventListener("afterClear", function() {
    console.log("Dates cleared!");
}, false);
```
```

--------------------------------

### Initialize Datepicker with End Date

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Set a specific end date for the datepicker's availability.

```javascript
var date = new Date();
date.setDate(date.getDate() + 25);
var codeDemo9 = document.getElementById("code-demo9");
var preDemo9 = document.getElementById("pre-demo9");
var txt = "var input = document.getElementById('input-id');\nvar datepicker = new HotelDatepicker(input, {\n endDate: " + fecha.format(date, "YYYY-MM-DD") + "\n});";
preDemo9.textContent = txt;
codeDemo9.textContent = fecha.format(date, "YYYY-MM-DD");
var demo9 = new HotelDatepicker( document.getElementById("demo9"), {
  endDate: date,
} );
```

--------------------------------

### Initialize Inline Datepicker with Clear Button

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Initialize an inline datepicker with a clear button for resetting selections.

```javascript
var demo24 = new HotelDatepicker( document.getElementById("demo24"), {
  inline: true,
  clearButton: true,
} );
```

--------------------------------

### Configure Datepicker in Italian

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Sets the datepicker's language to Italian, including date formats, day/month names, and custom messages.

```javascript
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'
    }
});
```

--------------------------------

### Custom Day Click Handler

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

Implement a custom function to be executed every time a day is clicked. This allows for custom behavior upon user interaction with the calendar days.

```javascript
onDayClick: function() {
    console.log('Day clicked!');
}
```

--------------------------------

### Handle Date Range Selection Event

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Implement the `onSelectRange` callback function to execute custom code whenever a date range is successfully selected.

```javascript
var demo23 = new HotelDatepicker( document.getElementById("demo23"), {
  onSelectRange: function () {
    console.log("Date range selected!");
  },
} );
```

--------------------------------

### Controlling Datepicker Programmatically with API Methods

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Use public methods to control the datepicker's behavior, such as opening, closing, setting date ranges, clearing selections, and destroying the instance. These methods allow for external control of the datepicker's state.

```javascript
const input = document.getElementById("input-id");
const datepicker = new HotelDatepicker(input);

// Open the datepicker programmatically
document.getElementById("open-btn").addEventListener("click", function() {
    datepicker.open();
});

// Close the datepicker
document.getElementById("close-btn").addEventListener("click", function() {
    datepicker.close();
});

// Set date range programmatically
const checkin = new Date(2024, 6, 15);  // July 15, 2024
const checkout = new Date(2024, 6, 20); // July 20, 2024
datepicker.setRange(checkin, checkout);

// Or with strings (matching format option)
datepicker.setRange("2024-07-15", "2024-07-20");

// Clear the selection
datepicker.clear();

// Get number of nights selected
const nights = datepicker.getNights();  // Returns 0 if no selection
console.log("Selected nights:", nights);

// Get the datepicker DOM element
const datepickerElement = datepicker.getDatePicker();

// Destroy the datepicker completely
datepicker.destroy();
```

--------------------------------

### Disable Check-in and Check-out on Specific Days

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Combine `noCheckInDaysOfWeek` and `noCheckOutDaysOfWeek` to restrict both check-in and check-out on the same set of days.

```javascript
var demo28 = new HotelDatepicker( document.getElementById("demo28"), {
  noCheckInDaysOfWeek: [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Sunday", ],
  noCheckOutDaysOfWeek: [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Sunday", ],
} );
```

--------------------------------

### Configure Selection Direction

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Enforces that the second date selected must be after the first date. Useful for preventing date range inversions.

```javascript
var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    selectForward: true
});
```

--------------------------------

### Custom Container

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Render the datepicker within a specific container element on your page, often used with inline mode.

```APIDOC
## Custom Container

Render the datepicker in a specific container element.

```javascript
// HTML structure:
// <div class="booking-widget">
//     <input type="text" id="booking-input" />
//     <div id="calendar-container"></div>
// </div>

const input = document.getElementById("booking-input");
const container = document.getElementById("calendar-container");

const datepicker = new HotelDatepicker(input, {
    container: container,  // Datepicker will render inside this element
    inline: true          // Often used with custom container
});
```
```

--------------------------------

### Extra Day Text

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Display custom content, such as prices, inside individual day cells within the datepicker.

```APIDOC
## Extra Day Text

Display custom content (like prices) inside day cells.

```javascript
const input = document.getElementById("input-id");

// Sample price data
const prices = {
    "2024-07-01": "$150",
    "2024-07-02": "$175",
    "2024-07-03": "$200",
    "2024-07-04": "$250"  // Holiday premium
};

const datepicker = new HotelDatepicker(input, {
    extraDayText: function(date, attributes) {
        // Only show prices for visible month days
        if (attributes.class.includes("datepicker__month-day--visibleMonth")) {
            if (prices[date]) {
                return "<span class='price'>" + prices[date] + "</span>";
            }
        }
        return "";
    }
});

// CSS to style the price:
// .datepicker__month-day--with-extra .price {
//     font-size: 10px;
//     display: block;
// }
```
```

--------------------------------

### Customize Extra Day Text

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Use `extraDayText` with a function to dynamically render custom content for specific dates, such as price information. The function receives the date and attributes.

```javascript
var testDate = new Date();
testDate.setDate(testDate.getDate() + 2);
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 "<span>$150</span>";
    }
  },
} );
```

--------------------------------

### Internationalization (i18n) Configuration

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

Configure localization settings for the datepicker, including names for days and months, and various text labels for user interface elements and messages. Note the change in 'day-names' usage in v.3.

```javascript
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'
}
```

--------------------------------

### Custom Extra Day Text Function

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

Provide a function to render custom text within day cells. This function receives the date and attributes, and should return the HTML string for the extra content, such as pricing.

```javascript
extraDayText: function(date, attributes) {
    if (attributes.class.includes("datepicker__month-day--visibleMonth")) {
        console.log(date);
        console.log(attributes);
        return "<span>$150</span>";
    }
}
```

--------------------------------

### Custom Date Range Selection Handler

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

Specify a custom function to be executed when a date range is successfully selected. This handler is called after the user has chosen their check-in and check-out dates.

```javascript
onSelectRange: function() {
    console.log('Date range selected!');
}
```

--------------------------------

### Custom Tooltip

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Customize the hovering tooltip that displays the night count. You can also disable the tooltip entirely.

```APIDOC
## Custom Tooltip

Customize the hovering tooltip that shows night count.

```javascript
const input = document.getElementById("input-id");

const datepicker = new HotelDatepicker(input, {
    // Custom tooltip function
    hoveringTooltip: function(nights, startTime, hoverTime) {
        if (nights === 0) return "";

        const pricePerNight = 100;
        const totalPrice = nights * pricePerNight;

        return nights + (nights === 1 ? " night" : " nights") +
               " - $" + totalPrice + " total";
    }
});

// Or disable tooltip entirely
const noTooltipDatepicker = new HotelDatepicker(input, {
    hoveringTooltip: false
});
```
```

--------------------------------

### Callback Functions for Datepicker Interactions

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Execute custom JavaScript code when users interact with the datepicker. This includes actions like clicking a day, opening the datepicker, selecting a date range, or closing/clearing the selection.

```javascript
const input = document.getElementById("input-id");

const datepicker = new HotelDatepicker(input, {
    // Called when any day is clicked
    onDayClick: function() {
        console.log("Day clicked!");
    },

    // Called when the datepicker opens
    onOpenDatepicker: function() {
        console.log("Datepicker opened!");
    },

    // Called when a complete range is selected
    onSelectRange: function() {
        console.log("Date range selected!");
        console.log("Nights:", datepicker.getNights());
    }
});

// Event listeners for close and clear actions
input.addEventListener("afterClose", function() {
    console.log("Datepicker closed!");
    console.log("Selected range:", input.value);
}, false);

input.addEventListener("afterClear", function() {
    console.log("Dates cleared!");
}, false);
```

--------------------------------

### Custom Datepicker Open Handler

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/README.md

Define a custom function that runs when the datepicker is opened. This is useful for triggering actions or updating UI elements when the calendar becomes visible.

```javascript
onOpenDatepicker: function() {
    console.log('Datepicker opened!');
}
```

--------------------------------

### Enforce Forward Date Selection

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Configure the datepicker to only allow users to select a check-out date that is after the selected check-in date. This ensures a logical date range selection.

```javascript
const input = document.getElementById("input-id");

const datepicker = new HotelDatepicker(input, {
    selectForward: true
});

// When selectForward is true:
// - First click selects check-in date
// - Second click must be on a date AFTER check-in
// - Clicking before check-in date starts a new selection

// When selectForward is false (default):
// - Dates can be selected in any order
// - The earlier date becomes check-in, later becomes check-out
```

--------------------------------

### Allow Check-in and Check-out Only on Saturday

Source: https://github.com/benitolopez/hotel-datepicker/blob/main/demo/index.html

Configures the datepicker to only allow check-in and check-out on Saturdays. All other days are restricted.

```javascript
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']
});
```

--------------------------------

### Disabled Dates Configuration

Source: https://context7.com/benitolopez/hotel-datepicker/llms.txt

Block specific dates from being selected, such as holidays or fully booked dates. Optionally, allow checkouts on disabled dates.

```javascript
const input = document.getElementById("input-id");

const datepicker = new HotelDatepicker(input, {
    // Disable specific dates (must be 'YYYY-MM-DD' format)
    disabledDates: [
        "2024-07-04",    // Independence Day
        "2024-12-25",    // Christmas
        "2024-12-31"     // New Year's Eve
    ]
});

// Allow checkout on disabled dates (first disabled date in a sequence)
const checkoutEnabledDatepicker = new HotelDatepicker(input, {
    disabledDates: [
        "2024-08-15",
        "2024-08-16",
        "2024-08-17"
    ],
    enableCheckout: true  // Users can checkout on 2024-08-15 but not check in
});
```