Air Datepicker

Install the air-datepicker package using npm to add the dependency to your project.

npm i air-datepicker

To use Air Datepicker, import the main class and its associated CSS file. You can then instantiate it by passing a CSS selector for the target element and an optional configuration object.

import AirDatepicker from 'air-datepicker'
import 'air-datepicker/air-datepicker.css'

new AirDatepicker('#el' [, options]);

Air Datepicker supports several configuration options to customize its behavior. Notable options include:

• selectedDates: An array of dates to be selected by default.
• disabledDates: A Set containing dates that should be disabled.
• fixedHeight: A boolean that, when true, ensures every month has an equal number of weeks.
• container: Allows you to specify a custom element to host the datepicker.
• dateFormat: Can be a string or a function for custom date formatting.
• navTitles: Can be a string or a function for dynamic navigation titles.

Note: In Version 3, localization must be provided as an object rather than a string.

The Air Datepicker instance provides several methods for programmatic control:

• disableDate(date): Disables one or multiple dates via the API.
• update(options): Updates the datepicker with new options. Passing selectedDates in the options will update the current selection. You can pass {silent: true} to prevent triggering events.
• setCurrentView(view, options): Changes the current view. You can pass {silent: true} to prevent triggering events.
• selectDate(date, options): Selects a specific date. The date can be a Date object or a string (e.g., '2024-03-05').
• clear(): Clears the selected dates.
• destroy(): Destroys the datepicker instance. After destruction, the isDestroyed property is set, and opts and selectedDates will return empty values instead of null.

You can hook into the datepicker lifecycle using callbacks. In Version 3, these callbacks receive a single object as an argument:

• onSelect: Triggered when a date is selected. In v3.6.0+, selecting a date in the calendar also triggers a change event on the associated <input /> element.
• onRenderCell: Triggered when a cell is rendered. You can use this callback to re-enable cells.