Elegant Accessible Date Range Picker In JavaScript – Hotel Datepicker

Preview:

Description:

Hotel Datepicker is a simple, flexible, customizable, accessible, and multilingual date range picker written in pure JavaScript.

Can be used on hotel websites to provide an intuitive interface for users to select their check-in and check-out dates.

How to use it:

1. Import Fecha library (for datetime manipulation) and the Hotel Datepicker.

# NPM
$ npm i hotel-datepicker

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

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

2. Attach a default date range picker to the specified input field.

<input id="example" />

const inputField = document.querySelector("#example");
const myDatePicker = new HotelDatepicker(inputField);

3. Customize the date range picker with the following configurations.

const myDatePicker = new HotelDatepicker(inputField,{
      // the CSS selector of the datepicker
      className: "datepicker",
      // date format
      format: "YYYY-MM-DD",
      infoFormat: "YYYY-MM-DD",
      ariaDayFormat: "dddd, MMMM DD, YYYY",
      // separator displayed between date strings
      separator: " - ",
      // or monday 
      startOfWeek: "sunday", // Or monday
      // start/end dates
      startDate: new Date(),
      endDate: false,
      // min/max nights required to select a range of dates
      minNights: 1,
      maxNights: 0,
      // allow ranges that are multiples of minNights only
      minNightsMultiple: false,
      // true: the second date must be after the first date
      selectForward: false,
      // disabled dates
      disabledDates: [],
      noCheckInDates: [],
      noCheckOutDates: [],
      disabledDaysOfWeek: [],
      noCheckInDaysOfWeek: [],
      noCheckOutDaysOfWeek: [],
      // allows the checkout on a disabled date or not
      enableCheckout: false,
      // determine whether to close the date range picker on click outside
      preventContainerClose: false,
      // container to hold the date range picker
      container: "",
      // animation speed
      animationSpeed: ".5s",
      // show a tooltip when hovering a date
      // or:
      // hoveringTooltip: function(nights, startTime, hoverTime) {
      //   return nights;
      // }
      hoveringTooltip: true, 
      // auto close the date range picker when a date range is selected 
      autoClose: true,
      // show/hide the toolbar
      showTopbar: true,
      // or "bottom"
      topbarPosition: "top"
      // move both months when clicking on the next/prev month button
      moveBothMonths: false,
      // enable inline mode
      inline: false,
      // show the Clear button
      clearButton: false,
      // show the Submit button
      submitButton: false,
      // the name of the Submit button
      submitButtonName: '',
      // trigger a custom function to show extra text in day cells
      // parameters: date, attributes
      extraDayText: false,
      // callback functions
      onDayClick: false,
      onOpenDatepicker: false,
      onSelectRange: false,
}),

4. Localize the date range picker.

const myDatePicker = new HotelDatepicker(inputField,{
      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'
    }
}),

5. API methods.

// get value
getValue()
// set value
setValue()
// open 
open()
// close
close()
// get the picker's element
getDatePicker()
Gets the datepicker DOM element.
// set range
setRange(d1, d2)
// clear value
clear()
// get the number of nights selected
getNights()
// destroy the instance
destroy()

6. Fire an event when the date range picker is closed.

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

Changelog:

v4.11.1 (12/09/2024)

• Bugfixes

v4.11.0 (08/25/2024)

• Bugfixes

v4.10.0 (06/07/2024)

• Add event when the datepicker clears the dates

v4.9.0 (06/02/2024)

• Add the ability to close the datepicker on scroll

v4.8.0 (05/19/2024)

• Add the ability to pass a custom selector

v4.7.4 (04/29/2024)

• Fix tabindex

v4.7.3 (03/28/2024)

• Bugfixes

v4.7.2 (03/25/2024)

• Bugfixes

v4.7.1 (01/22/2024)

• Bugfixes

v4.7.0 (11/19/2023)

• Add the ability to allow ranges that are multiples of minNights only

v4.6.2 (10/14/2023)

• Maintain class of days with extra text after range selection