Air Datepicker

https://github.com/t1m0n/air-datepicker
Admin
Air Datepicker is a lightweight, dependency-free, fast, and customizable datepicker written in pure...
Tokens:63,277
Snippets:445
Trust Score:7.8
License:MIT
Update:3 days ago
Show doc for...
Tokens:
Raw
### Run project with npm

Source: https://github.com/t1m0n/air-datepicker/blob/v3/README.md

Install dependencies and start the development server. Run `npm i` first, then `npm run dev:serve`.

```bash
npm i
```

```bash
npm run dev:serve
```

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

### Quick start: Initialize AirDatepicker with range and date format

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/README.md

Imports the AirDatepicker library and its CSS, then creates a new instance on the '#el' element with range selection enabled and a date format of 'yyyy-MM-dd'. This is the minimal setup to get started.

```javascript
import AirDatepicker from 'air-datepicker';
import 'air-datepicker/air-datepicker.css';

const dp = new AirDatepicker('#el', {
    range: true,
    dateFormat: 'yyyy-MM-dd'
});
```

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

### Install Air Datepicker via npm

Source: https://github.com/t1m0n/air-datepicker/blob/v3/README.md

Install the air-datepicker package using npm.

```bash
npm i air-datepicker
```

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

### Usage example

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/utils.md

Demonstrates importing and using the utility functions from the air-datepicker library.

```APIDOC
## Usage example

### Description
Shows how to import and use the utility functions.

### Example
```js
import {createDate, getParsedDate, isSameDate, deepMerge, createElement} from './src/utils';

createDate('2024-03-05');   // Date, local midnight (T00:00:00 appended)
createDate('not-a-date');   // console warning, returns false

getParsedDate(new Date(2024, 2, 5, 14, 30));
// {year: 2024, month: 2, fullMonth: 3, date: 5, fullDate: '05', day: 2,
//  hours: 14, fullHours: '14', hours12: 2, dayPeriod: 'pm',
//  fullHours12: '02', minutes: 30, fullMinutes: '30'}

deepMerge({a: {b: 1}}, {a: {c: 2}});   // {a: {b: 1, c: 2}}
```
```

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

### Range dragging example

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-body.md

Example of enabling dynamic range dragging with the range and dynamicRange options.

```javascript
// Range dragging example (options used to enable the behavior):
const dp = new AirDatepicker('#el', {
    range: true,
    dynamicRange: true, // default true — enables drag-to-resize of a selected range
});
```

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

### English Locale Example (src/locale/en.js)

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/locales.md

Example locale file for English. Shows the complete set of fields required for a locale object.

```javascript
export default {
    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    today: 'Today',
    clear: 'Clear',
    dateFormat: 'MM/dd/yyyy',
    timeFormat: 'hh:mm aa',
    firstDay: 0
};
```

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

### Example of using up() and down() methods

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Demonstrates how to use up() and down() to navigate between views. Calling up() moves from days to months to years, while down() moves back.

```javascript
const dp = new AirDatepicker('#el');
dp.up();      // days -> months
dp.up();      // months -> years
dp.down();    // years -> months
```

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

### Usage example with buttons option

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-buttons.md

Shows how to configure custom buttons using preset strings and button objects with content, onClick, tagName, and className.

```javascript
const dp = new AirDatepicker('#el', {
    buttons: [
        'clear', // preset string
        {
            content: 'Now',
            onClick: (dp) => dp.selectDate(new Date(), {updateTime: true}),
        },
        {
            content: (dp) => dp.hasSelectedDates ? 'Reset' : '—',
            tagName: 'span',
            className: '-ghost-',
            onClick: (dp) => dp.clear({silent: true}),
        },
    ],
});
```

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

### formatDate usage example

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Example of using formatDate to format a specific date with a custom format string. The output is shown in a comment.

```javascript
const dp = new AirDatepicker('#el', {locale: enLocale});
console.log(dp.formatDate(new Date(2024, 2, 5, 14, 30), 'dd MMMM yyyy, HH:mm'));
// "05 March 2024, 14:30"
```

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

### Example of using getCell() method

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Demonstrates how to use getCell() to retrieve a cell element and check if it has the '-current-' class, which indicates today's date.

```javascript
const dp = new AirDatepicker('#el', {visible: true});
const cell = dp.getCell(new Date(), 'day');
if (cell) cell.classList.contains('-current-'); // true for today
```

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

### Usage example: listening to changeSelectedDate

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker.md

Shows how to create an Air Datepicker instance and use the on method to listen for the 'changeSelectedDate' event. The callback receives an object with action and date properties, logging 'selectDate' and the Date object when a date is selected.

```javascript
const dp = new AirDatepicker('#el');

dp.on('changeSelectedDate', ({action, date}) => {
    console.log(action, date); // 'selectDate', Date
});

dp.selectDate(new Date());
```

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

### selectDate usage examples

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Demonstrates various ways to call selectDate: with a date string, an array of dates, and with the updateTime option. Also shows an invalid call that triggers a console warning and returns undefined.

```javascript
const dp = new AirDatepicker('#el');

await dp.selectDate('2024-03-05');          // string date-only → local Date
await dp.selectDate([d1, d2]);              // multiple
await dp.selectDate(d, {updateTime: true}); // sync time sliders with the date

dp.selectDate({}); // invalid → createDate() console warning, returns undefined, nothing selected
```

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

### clear usage example

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Demonstrates clearing selected dates with the silent option and checking the result.

```javascript
const dp = new AirDatepicker('#el', {multipleDates: 3});
await dp.selectDate([d1, d2]);
await dp.clear({silent: true});
console.log(dp.selectedDates.length); // 0
```

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

### Usage example for disabling dates

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Demonstrates creating a datepicker, disabling a single date and an array of dates, checking if a date is disabled, and re-enabling a date.

```javascript
const dp = new AirDatepicker('#el');
dp.disableDate('2024-12-25');
dp.disableDate([new Date(2024, 11, 24), '2024-12-26']);
console.log(dp.isDateDisabled('2024-12-25')); // true
dp.enableDate('2024-12-25');                  // re-enable
console.log(dp.isDateDisabled('2024-12-25')); // false
```

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

### getRangeDate()

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Returns the current range start date.

```APIDOC
## getRangeDate()

### Description
Returns the current range start date.

### Method
getRangeDate

### Signature
`getRangeDate(): Date | null`

### Parameters
None.

### Returns
- **Date | null** - The range start date, or `null` if not set.
```

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

### destroy() usage example

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Creates a datepicker and immediately destroys it. After destruction, isDestroyed is true and selectedDates is empty.

```javascript
const dp = new AirDatepicker('#el');
dp.destroy();
console.log(dp.isDestroyed, dp.selectedDates.length); // true 0
```

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

### renderDayNames() method

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-body.md

Renders the seven day-name cells starting from locale.firstDay, applying weekend and clickable classes and data-day-index attributes.

```javascript
renderDayNames() {
    this.$names.innerHTML =  this._getDayNamesHtml();
}
```

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

### setRangeDate(date)

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Sets the range start date.

```APIDOC
## setRangeDate(date)

### Description
Sets the range start date.

### Method
setRangeDate

### Signature
`setRangeDate(date: AirDatepickerDate): void`

### Parameters
- **date** (AirDatepickerDate) - Required - The date to set as the range start.

### Returns
`void`
```

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

### Usage example with utility functions

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/utils.md

Shows how to use createDate, getParsedDate, and deepMerge. createDate returns a Date at local midnight or false with a console warning for invalid input. getParsedDate returns an object with date components. deepMerge merges nested objects.

```javascript
import {createDate, getParsedDate, isSameDate, deepMerge, createElement} from './src/utils';

createDate('2024-03-05');   // Date, local midnight (T00:00:00 appended)
createDate('not-a-date');   // console warning, returns false

getParsedDate(new Date(2024, 2, 5, 14, 30));
// {year: 2024, month: 2, fullMonth: 3, date: 5, fullDate: '05', day: 2,
//  hours: 14, fullHours: '14', hours12: 2, dayPeriod: 'pm',
//  fullHours12: '02', minutes: 30, fullMinutes: '30'}

deepMerge({a: {b: 1}}, {a: {c: 2}});   // {a: {b: 1, c: 2}}
```

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

### update() usage example

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Creates a datepicker with a minimum date and then updates it to enable range mode and set a maximum date silently. The silent parameter prevents callbacks from firing.

```javascript
const dp = new AirDatepicker('#el', {minDate: new Date()});
dp.update({
    range: true,
    maxDate: new Date(2025, 11, 31),
}, {silent: true});
```

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

### getInitialFocusDate() method

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-keyboard.md

Returns the Date that keyboard focus starts from: the current focusDate, else the last selected date, else a view-appropriate default (today for the days view, first of month/year otherwise).

```javascript
getInitialFocusDate() {
    let {focusDate, currentView, selectedDates, parsedViewDate: {year, month}} = this.dp;
    let potentialFocused = focusDate || selectedDates[selectedDates.length - 1];
    if (!potentialFocused) {
        switch (currentView) {
            case consts.days:    potentialFocused = new Date(year, month, new Date().getDate()); break;
            case consts.months:  potentialFocused = new Date(year, month, 1); break;
            case consts.years:   potentialFocused = new Date(year, 0, 1); break;
        }
    }
    return potentialFocused;
}
```

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

### setRangeDates(start, end)

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Sets the range start and end dates.

```APIDOC
## setRangeDates(start, end)

### Description
Sets the range start and end dates.

### Method
setRangeDates

### Signature
`setRangeDates(start: AirDatepickerDate, end: AirDatepickerDate): void`

### Parameters
- **start** (AirDatepickerDate) - Required - The start date of the range.
- **end** (AirDatepickerDate) - Required - The end date of the range.

### Returns
`void`
```

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

### show()

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Shows the calendar. On first show, builds components, positions the calendar, adds the active class, and triggers the onShow callback.

```APIDOC
## show()

### Description
Shows the calendar. On first show, builds components, positions the calendar, adds the active class, and triggers the onShow callback.

### Method
show

### Signature
show()

### Parameters
None

### Return Value
- **undefined**

### Behavior
- On first show, builds the components (`_createComponents`)
- Calls `setPosition(this.opts.position)`
- Adds the `-active-` class
- Sets `visible = true`
- Schedules `onShow(isAnimationComplete)` after the transition
- Shows the mobile overlay when `isMobile`
```

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

### init() method

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-body.md

Initializes the body by building base HTML, rendering day names for days view, rendering cells, and binding DOM and datepicker events.

```javascript
init() {
    this._buildBaseHtml();
    if (this.type === consts.days) {
        this.renderDayNames();
    }
    this.render();
    this._bindEvents();
    this._bindDatepickerEvents();
}
```

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

### Import and initialize Air Datepicker

Source: https://github.com/t1m0n/air-datepicker/blob/v3/README.md

Import the AirDatepicker class and its CSS, then create a new instance by passing a CSS selector and optional options object.

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

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

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

### getRangeDates()

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Returns the current range start and end dates.

```APIDOC
## getRangeDates()

### Description
Returns the current range start and end dates.

### Method
getRangeDates

### Signature
`getRangeDates(): [Date | null, Date | null]`

### Parameters
None.

### Returns
- **[Date | null, Date | null]** - An array containing the start and end dates of the range, or `null` for each if not set.
```

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

### Create AirDatepicker instance with multiple dates, min/max, buttons, timepicker, and callbacks

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/configuration.md

Imports AirDatepicker and its CSS, then creates a new instance on '#el' with multipleDates, separator, minDate, maxDate, buttons, timepicker, and onSelect/onBeforeSelect callbacks. onBeforeSelect returns false for Sundays to block selection.

```javascript
import AirDatepicker from 'air-datepicker';
import 'air-datepicker/air-datepicker.css';

const dp = new AirDatepicker('#el', {
    multipleDates: 5,
    multipleDatesSeparator: ' | ',
    minDate: '2024-01-01',
    maxDate: '2024-12-31',
    buttons: ['clear', 'today'],
    timepicker: true,
    onSelect({date, formattedDate, datepicker}) {
        console.log(date, formattedDate);
    },
    onBeforeSelect({date}) {
        return date.getDay() !== 0; // block Sundays
    },
});
```

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

### new AirDatepicker(el, opts)

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker.md

Creates a new AirDatepicker instance. The constructor accepts a CSS selector or HTMLElement and an optional options object. If the element is not found, the instance is unusable.

```APIDOC
## Constructor: new AirDatepicker(el, opts)

### Description
Creates a new AirDatepicker instance. The constructor accepts a CSS selector or HTMLElement and an optional options object. If the element is not found, the instance is unusable.

### Method
Constructor

### Signature
```ts
constructor(el: string | E, opts?: AirDatepickerOptions<E>)
```

### Parameters
- **el** (`AirDatepickerSelector` = `string | HTMLElement`) - Required - CSS selector or element. For strings, `getEl()` runs `context.querySelector(el)`, so the string must be a valid query selector. If the element is not found, the constructor returns early and the instance is unusable (`$el` is `null`).
- **opts** (`AirDatepickerOptions<E>`) - Optional - Default: `{}` - Deep-merged over `AirDatepicker.defaults`. Unknown keys are copied verbatim.

### Behavior
- When `el.nodeName === 'INPUT'`, the picker attaches to the input (`elIsInput = true`).
- For any other element, the calendar is rendered inside that element (`treatAsInline = this.opts.inline || !this.elIsInput`).

### Example
```js
import AirDatepicker from 'air-datepicker';

// On an <input id="birthday">
const dp = new AirDatepicker('#birthday', {
    range: true,
    dateFormat: 'yyyy-MM-dd',
    minDate: new Date(2000, 0, 1),
    maxDate: new Date(),
});

// Inline calendar inside a <div id="calendar-root">
const inline = new AirDatepicker('#calendar-root', {
    inline: true,
    selectedDates: [new Date()],
});
```
```

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

### getDecade(date)

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/utils.md

Returns the start and end years of the decade containing the given date's year.

```APIDOC
## getDecade(date)

### Description
Returns an array with the first and last year of the decade that contains the year of the given date.

### Parameters
- **date** (Date) - Required - The date whose decade is returned.

### Returns
- **Array** - `[firstYear, lastYear]` where `firstYear` is the first year of the decade and `lastYear` is the last year (firstYear + 9).

### Example
```js
const decade = getDecade(new Date(2023, 0, 1)); // [2020, 2029]
```
```

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

### show()

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Shows the datepicker.

```APIDOC
## show()

### Description
Shows the datepicker.

### Method
show

### Signature
`show(): void`

### Parameters
None.

### Returns
`void`
```

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

### AirDatepicker constructor implementation

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker.md

Shows the internal constructor logic: resolves the element, creates the datepicker container, deep-merges options with defaults, and initializes. Returns early if the element is not found.

```javascript
constructor(el, opts) {
    this.$el = getEl(el);
    if (!this.$el) return;
    this.$datepicker = createElement({className: 'air-datepicker'});
    this.opts = deepMerge({}, defaults, opts);
    ...
    this.init();
}
```

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

### AirDatepicker.buildGlobalContainer(id) static method

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker.md

Creates a container div with the given id and class, appends it to <body>, and sets containerBuilt to true. Called automatically from init() when the picker is not inline, is attached to an <input>, and has no container option. Returns undefined.

```javascript
static buildGlobalContainer(id) {
    containerBuilt = true;
    $datepickersContainer = createElement({className: id, id});
    getEl('body').appendChild($datepickersContainer);
}
```

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

### AirDatepickerDecade

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/types.md

Type alias representing a decade as a tuple of two numbers (start and end year). Used in callbacks and instance properties.

```APIDOC
## Type: AirDatepickerDecade

### Description
Type alias representing a decade as a tuple of two numbers (start and end year). Used in callbacks and instance properties.

### Definition
```ts
export declare type AirDatepickerDecade = [number, number];
```

### Usage
Used by `onChangeViewDate` callback `decade`; `dp.curDecade`; produced by `getDecade(date)` in `src/utils.js`.
```

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

### AirDatepicker Constructor

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/configuration.md

Creates a new AirDatepicker instance with configuration options.

```APIDOC
## AirDatepicker Constructor

### Description
Creates a new AirDatepicker instance with the provided configuration options.

### Method
Constructor

### Endpoint
`new AirDatepicker(element, options)`

### Parameters
#### Options
- **multipleDates** (number) - Optional - Maximum number of selectable dates.
- **multipleDatesSeparator** (string) - Optional - Separator between multiple dates.
- **minDate** (string) - Optional - Minimum selectable date in 'YYYY-MM-DD' format.
- **maxDate** (string) - Optional - Maximum selectable date in 'YYYY-MM-DD' format.
- **buttons** (array) - Optional - Array of button names to display (e.g., 'clear', 'today').
- **timepicker** (boolean) - Optional - Enables timepicker.
- **onSelect** (function) - Optional - Callback invoked when a date is selected. Receives an object with `date`, `formattedDate`, and `datepicker`.
- **onBeforeSelect** (function) - Optional - Callback invoked before a date is selected. Returning a falsy value aborts the selection. Receives an object with `date` and `datepicker`.

### Request Example
```js
const dp = new AirDatepicker('#el', {
    multipleDates: 5,
    multipleDatesSeparator: ' | ',
    minDate: '2024-01-01',
    maxDate: '2024-12-31',
    buttons: ['clear', 'today'],
    timepicker: true,
    onSelect({date, formattedDate, datepicker}) {
        console.log(date, formattedDate);
    },
    onBeforeSelect({date}) {
        return date.getDay() !== 0; // block Sundays
    },
});
```

### Response
No return value (constructor).
```

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

### Generated Locale Type Declaration (dist/locale/en.d.ts)

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/locales.md

Example of the generated TypeScript declaration file for a locale, declaring a module and exporting the locale object.

```typescript
declare module 'air-datepicker/locale/en' {
    import {AirDatepickerLocale} from 'air-datepicker';
    const en: AirDatepickerLocale;

    export default en;
}
```

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

### AirDatepicker.version static property

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker.md

Current library version string.

```javascript
static version = '3.6.0'
```

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

### getDatesFunction(viewType) - Get generator by view type

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-body.md

Static method that returns the matching static generator function based on the viewType parameter. Defaults to consts.days. Used by AirDatepicker.getViewDates.

```javascript
static getDatesFunction(viewType = consts.days) {
    return {
        [consts.days]: DatepickerBody.getDaysDates,
        [consts.months]: DatepickerBody.getMonthsDates,
        [consts.years]: DatepickerBody.getYearsDates,
    }[viewType];
}
```

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

### DatepickerKeyboard constructor

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-keyboard.md

Constructor that stores the parent datepicker instance and merged options, then calls init().

```javascript
constructor({dp, opts}) {
    this.dp = dp;
    this.opts = opts;
    this.init();
}
```

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

### render() and generateButtons() methods

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-buttons.md

render() calls generateButtons(), which normalizes the buttons option to an array and creates each button, attaching onClick handlers if defined.

```javascript
render() { this.generateButtons(); }

generateButtons() {
    let {buttons} = this.opts;
    if (!Array.isArray(buttons)) {
        buttons = [buttons];
    }
    buttons.forEach((b) => {
        let data = b;
        if (typeof b === 'string' && buttonPresets[b]) {
            data = buttonPresets[b];
        }
        let button = this.createButton(data);
        if (data.onClick) {
            this.attachEventToButton(button, data.onClick);
        }
        this.$el.appendChild(button);
    });
}
```

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

### class AirDatepicker<E>

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/types.md

Main datepicker class. Provides constructor, static members, instance methods for controlling the datepicker, and instance properties.

```APIDOC
## Class: AirDatepicker<E>

### Description
Main datepicker class. Provides constructor, static members, instance methods for controlling the datepicker, and instance properties.

### Generic Parameter
- **E** (HTMLElement) - Default `HTMLInputElement` - The target element type.

### Constructor
```ts
constructor(el: string | E, opts?: AirDatepickerOptions<E>)
```

### Static Members

#### defaults
```ts
static defaults: AirDatepickerOptions
```

#### version
```ts
static version: string
```

#### defaultGlobalContainerId
```ts
static defaultGlobalContainerId: string
```

#### buildGlobalContainer
```ts
static buildGlobalContainer: (id?: string) => void;
```

### Instance Methods

#### show
```ts
show: () => void
```
Shows the datepicker.

#### hide
```ts
hide: () => void
```
Hides the datepicker.

#### next
```ts
next: () => void
```
Navigates to the next view (e.g., next month).

#### prev
```ts
prev: () => void
```
Navigates to the previous view (e.g., previous month).

#### selectDate
```ts
selectDate: (date: AirDatepickerDate | AirDatepickerDate[], opts?: {updateTime?: boolean, silent?: boolean}) => Promise<void>
```
Selects one or more dates. Returns a Promise.

#### unselectDate
```ts
unselectDate: (date: AirDatepickerDate) => void
```
Unselects a date.

#### clear
```ts
clear: (opts?: {silent?: boolean}) => void
```
Clears all selected dates.

#### formatDate
```ts
formatDate: (date: AirDatepickerDate, format: string) => string
```
Formats a date according to the given format string.

#### destroy
```ts
destroy: () => void
```
Destroys the datepicker instance.

#### update
```ts
update: (newOpts?: AirDatepickerOptions, params?: {silent?: boolean}) => void
```
Updates the datepicker options.

#### setCurrentView
```ts
setCurrentView: (newView: AirDatepickerViews, params?: {silent?: boolean}) => void
```
Sets the current view (days, months, years).

#### setViewDate
```ts
setViewDate: (newViewDate: AirDatepickerDate) => void
```
Sets the view date.

#### setFocusDate
```ts
setFocusDate: (date: AirDatepickerDate | false, opts?: {viewDateTransition?: boolean}) => void
```
Sets the focus date.

#### up
```ts
up: (date?: AirDatepickerDate) => void
```
Navigates up in the view hierarchy.

#### down
```ts
down: (date?: AirDatepickerDate) => void
```
Navigates down in the view hierarchy.

#### disableDate
```ts
disableDate: (date: AirDatepickerDate | AirDatepickerDate[]) => void
```
Disables one or more dates.

#### enableDate
```ts
enableDate: (date: AirDatepickerDate | AirDatepickerDate[]) => void
```
Enables one or more dates.

### Instance Properties

- **$el** (E) - The target element.
- **$datepicker** (HTMLDivElement) - The datepicker DOM element.
- **viewDate** (Date) - The current view date.
- **currentView** (AirDatepickerViews) - The current view.
- **selectedDates** (Date[]) - Array of selected dates.
- **focusDate** (Date | false) - The current focus date or false.
- **visible** (boolean) - Whether the datepicker is visible.
- **disabledDates** (Set<string>) - Set of disabled dates.
- **isDestroyed** (boolean) - Whether the instance is destroyed.

### Known Deviations
- `clear` is typed `() => void` but the source returns `Promise<void>`.
- `unselectDate` is typed `() => void` but the source returns a boolean (`selected.some(...)`).
- `replaceDate`, `getCell`, `getViewDates`, `isDateDisabled`, `setPosition`, `isWeekend`, `getClampedDate`, `isOtherMonth/Year/Decade`, `on`/`off`/`trigger` are implemented but not declared in `.d.ts`.
```

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

### Initialize AirDatepicker with timepicker and select date

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-time.md

Creates an AirDatepicker instance with timepicker enabled, 12-hour format with AM/PM, office hours from 9 to 18, and 5-minute steps. Then selects a specific date and time, logging the formatted value. The changeTime event is internal and handled by _onChangeTime.

```javascript
const dp = new AirDatepicker('#el', {
    timepicker: true,
    dateTimeSeparator: ' ',
    timeFormat: 'hh:mm aa',       // 12-hour with AM/PM
    // timeFormat: 'HH:mm',       // 24-hour
    minHours: 9, maxHours: 18,    // office hours only
    minutesStep: 5,
});

await dp.selectDate(new Date(2024, 2, 5, 14, 30));
console.log(dp.$el.value);        // e.g. "03/05/2024 02:30 pm"
```

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

### DatepickerCell usage example with dp.getCell() and onRenderCell

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-cell.md

Shows how to disable a date and add custom classes/html via onRenderCell, then retrieve the cell instance with dp.getCell(). Note that returning {disabled: false} in onRenderCell re-enables a previously disabled date as of v3.6.0.

```javascript
// Cells are created internally; the typical public interaction is dp.getCell():
const dp = new AirDatepicker('#el', {
    visible: true,
    onRenderCell({date, cellType, datepicker}) {
        if (date.getDate() === 13) {
            return {disabled: true, classes: '-bad-luck-', html: '13'};
        }
    }
});

const today = dp.getCell(new Date(), 'day'); // HTMLElement | undefined
const cell = today && today.adpCell;         // DatepickerCell instance
console.log(cell.isDisabled, cell.customData);
```

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

### Instantiate Air Datepicker with options

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/configuration.md

Creates a new Air Datepicker instance on the given element with the provided options. Options are deep-merged over the defaults object.

```javascript
new AirDatepicker(el, options)
```

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

### getParsedDate function

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/utils.md

Returns an object with parsed date parts including year, month, fullMonth, date, fullDate, day, hours, fullHours, hours12, dayPeriod, fullHours12, minutes, and fullMinutes. Uses getDayPeriodFromHours24 to get 12-hour format and day period.

```javascript
export function getParsedDate(date) {
    let hours = date.getHours(),
        {hours: hours12, dayPeriod} = getDayPeriodFromHours24(hours);
    return {
        year, month, fullMonth, date, fullDate, day,
        hours, fullHours, hours12, dayPeriod, fullHours12,
        minutes, fullMinutes
    };
}
```

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

### next() and prev() method implementations and type declarations

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Shows the internal implementation of next() and prev() in src/datepicker.js and their TypeScript declarations in src/datepicker.d.ts. These methods move to the next or previous month/year/decade depending on the current view.

```javascript
// src/datepicker.js:416 and :435
next = () => { ... }   // moves to the next month/year/decade depending on currentView
prev = () => { ... }   // moves to the previous month/year/decade
// src/datepicker.d.ts
next: () => void
prev: () => void
```

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

### show method signature

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Shows the JavaScript implementation signature and TypeScript type definition for the show method. It displays the calendar, builds components on first show, positions it, and triggers callbacks.

```javascript
// src/datepicker.js:645
show() { ... }
// src/datepicker.d.ts
show: () => void
```

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

### getEl(el, context)

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/utils.md

Selects an element by selector string or returns the element directly. If a string is provided, it runs querySelector on the given context (default document).

```APIDOC
## getEl(el, context)

### Description
Selects an element by selector string or returns the element directly. If a string is provided, it runs querySelector on the given context (default document).

### Parameters
- **el** (string | HTMLElement) - Required - Selector string (run through querySelector) or element
- **context** (Document | HTMLElement) - Optional - Query context. Default: document

### Returns
- **HTMLElement | null** - The matched element or null if not found.
```

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

### getDaysDates(dp, cb) - Generate days grid

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-body.md

Static method that returns the full rendered month grid as a Date[] array, with weeks aligned to the locale's firstDay. When opts.fixedHeight is true, it always renders 42 dates (6 weeks). The optional cb callback is invoked for each date.

```javascript
static getDaysDates(dp, cb) {
    let {viewDate, opts: {fixedHeight}, locale: {firstDay}} = dp,
        totalMonthDays = getDaysCount(viewDate),
        {year, month} = getParsedDate(viewDate), ...
    let firstRenderDate = subDays(firstMonthDay, daysFromPrevMonth),
        totalRenderDays = totalMonthDays + daysFromPrevMonth + daysFromNextMonth, ...
    if (fixedHeight) {
        totalRenderDays = 6 * 7; // Render 6 weeks in every month
    }
    const dates = [];
    while (i < totalRenderDays) {
        let date = new Date(renderYear, renderMonth, firstRenderDayDate + i);
        if (cb) cb(date);
        dates.push(date);
        i++;
    }
    return dates;
}
```

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

### AirDatepicker navTitles configuration with prev/next and min/max dates

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-nav.md

Configures an AirDatepicker instance with custom prev/next HTML, navTitles where days and years are strings and months is a function, and min/max date constraints. The DatepickerNav is internal; use dp.prev() to navigate and trigger re-render via changeViewDate.

```javascript
const dp = new AirDatepicker('#el', {
    prevHtml: '←',
    nextHtml: '→',
    navTitles: {
        days: 'MMMM <i>yyyy</i>',
        months: (dp) => dp.formatDate(dp.viewDate, 'yyyy'),
        years: 'yyyy1 — yyyy2',
    },
    minDate: new Date(2024, 0, 1),
    maxDate: new Date(2024, 11, 31),
});

// The DatepickerNav is internal; interact through the datepicker:
dp.prev(); // moves to previous month; nav re-renders via changeViewDate
```

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

### getEl - Query or return element

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/utils.md

Returns an element from a selector string or the element itself. Uses querySelector with a default context of document.

```javascript
export function getEl(el, context = document) {
    return typeof el === 'string'
        ? context['querySelector'](el)
        : el;
}
```

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

### DatepickerBody constructor implementation

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-body.md

Initializes the DatepickerBody instance with the parent datepicker, view type, and options. Sets up internal state and calls init() to build the view.

```javascript
constructor({dp, type, opts}) {
    this.dp = dp;
    this.type = type;
    this.opts = opts;
    this.cells = [];
    this.$el = '';
    this.pressed = false;
    this.isVisible = true;
    this.init();
}
```

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

### classNames - Join class names

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/utils.md

Joins string arguments and truthy object keys into a space-separated class string. Simplified version of the classnames library.

```javascript
export function classNames(...classes) {
    let classNames = [];
    classes.forEach((c) => {
        if (typeof c === 'object') {
            for (let cName in c) { if (c[cName]) classNames.push(cName); }
        } else if (c) { classNames.push(c); }
    });
    return classNames.join(' ');
}
```

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

### DatepickerCell init method

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-cell.md

Runs the onRenderCell option if provided, stores its result in customData, creates the element, binds datepicker events, and syncs disabled state: customData.disabled === true disables the date, customData.disabled === false enables it (re-enabling, v3.6.0).

```javascript
init() {
    let {onRenderCell} = this.opts;
    if (onRenderCell) {
        this.customData = onRenderCell({
            date: this.date,
            cellType: this.singleType,
            datepicker: this.dp,
        });
    }
    this._createElement();
    this._bindDatepickerEvents();
    if (this.customData?.disabled) {
        this.dp.disableDate(this.date);
    } else if (this.customData?.disabled === false) {
        this.dp.enableDate(this.date);
    }
}
```

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

### DatepickerTime constructor implementation

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-time.md

The constructor stores opts and dp, checks the locale timeFormat for 12-hour tokens (h or hh) to set ampm, and calls init(). The ampm flag becomes true when the effective timeFormat contains h or hh.

```javascript
constructor({opts, dp} = {}) {
    this.opts = opts;
    this.dp = dp;
    let {timeFormat} = this.dp.locale;
    if (timeFormat && (timeFormat.match(getWordBoundaryRegExp('h')) || timeFormat.match(getWordBoundaryRegExp('hh')))) {
        this.ampm = true;
    }
    this.init();
}
```

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

### createElement - Create element with options

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/utils.md

Creates a DOM element with optional tag name, classes, inner HTML, id, and attributes. Applies attributes via setAttribute.

```javascript
export function createElement({tagName = 'div', className = '', innerHtml = '', id = '', attrs = {}} = {}) {
    let $element = document.createElement(tagName);
    if (className) $element.classList.add(...className.split(' '));
    if (id) $element.id = id;
    if (innerHtml) $element.innerHTML = innerHtml;
    if (attrs) setAttribute($element, attrs);
    return $element;
}
```

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

### classNames(...classes)

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/utils.md

Joins string arguments and truthy object keys into a single class string. Simplified version of the classnames library.

```APIDOC
## classNames(...classes)

### Description
Joins string arguments and truthy object keys into a single class string. Simplified version of the classnames library.

### Parameters
- **...classes** (string | object) - Required - Strings or objects with boolean values

### Returns
- **string** - Space-separated class names.
```

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

### show() and hide() methods

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-body.md

Toggle the body visibility by adding or removing the '-hidden-' class and setting the isVisible flag.

```javascript
show() { this.isVisible = true;  this.$el.classList.remove('-hidden-'); }
hide() { this.isVisible = false; this.$el.classList.add('-hidden-'); }
```

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

### next()

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Moves the datepicker to the next month/year/decade depending on the current view.

```APIDOC
## next()

### Description
Moves the datepicker to the next month/year/decade depending on the current view.

### Method
next

### Signature
`next(): void`

### Parameters
None.

### Returns
`void`
```

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

### _handleClasses() method

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-cell.md

Refreshes -focus-, -selected-, -range-from-, -range-to-, -in-range- plus base classes from _getClassName. Base classes include common, days, months, years, and customData.classes.

```javascript
_handleClasses() {
    this.$cell.setAttribute('class', '');
    this._handleInitialFocusStatus();
    if (this.dp.hasSelectedDates) {
        this._handleSelectedStatus();
        if (this.dp.opts.range) this._handleRangeStatus();
    }
    this.$cell.classList.add(...this._getClassName());
}
```

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

### next() / prev()

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Moves the datepicker to the next or previous month, year, or decade depending on the current view.

```APIDOC
## next() / prev()

### Description
Moves the datepicker to the next or previous month, year, or decade depending on the current view.

### Method
`next()` and `prev()` are instance methods of the AirDatepicker class.

### Parameters
None.

### Behavior
- In `days` view: `next()` sets view date to `new Date(year, month + 1, 1)`, `prev()` to `new Date(year, month - 1, 1)`.
- In `months` view: `next()` sets view date to `new Date(year + 1, month, 1)`, `prev()` to `new Date(year - 1, month, 1)`.
- In `years` view: `next()` sets view date to `new Date(year + 10, 0, 1)`, `prev()` to `new Date(year - 10, 0, 1)`.

### TypeScript Signatures
```typescript
next: () => void
prev: () => void
```
```

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

### isOtherMonth, isOtherYear, isOtherDecade methods

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

These methods take a Date and return a boolean. They back the -other-month- and -other-decade- cell classes and the viewDateTransition logic of _onChangeFocusedDate.

```javascript
// src/datepicker.js:1248
isOtherMonth(date)   { let {month} = getParsedDate(date); return month !== this.parsedViewDate.month; }
isOtherYear(date)    { let {year} = getParsedDate(date); return year !== this.parsedViewDate.year; }
isOtherDecade(date)  { let {year} = getParsedDate(date);
                       let [firstDecadeYear, lastDecadeYear] = getDecade(this.viewDate);
                       return year < firstDecadeYear || year > lastDecadeYear; }
```

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

### AirDatepickerOptions<E>

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/types.md

Generic options type for configuring the datepicker. Includes callback signatures for various events.

```APIDOC
## Type: AirDatepickerOptions<E>

### Description
Generic options type for configuring the datepicker. Includes callback signatures for various events.

### Definition
```ts
export declare type AirDatepickerOptions<E extends HTMLElement = HTMLInputElement> = { ... }
```

### Generic Parameter
- **E** (HTMLElement) - Default `HTMLInputElement` - The target element type.

### Callback Signatures

#### onSelect
```ts
onSelect?: ({date, formattedDate, datepicker}: {date: Date | Date[], formattedDate: string | string[], datepicker: AirDatepicker<E>}) => void
```

#### onChangeViewDate
```ts
onChangeViewDate?: ({month, year, decade}: {month: number, year: number, decade: AirDatepickerDecade}) => void
```

#### onChangeView
```ts
onChangeView?: (view: AirDatepickerViews) => void
```

#### onRenderCell
```ts
onRenderCell?: (params: {date: Date, cellType: AirDatepickerViewsSingle, datepicker: AirDatepicker<E>}) => ({
    disabled?: boolean,
    classes?: string,
    html?: string
    attrs?: Record<string, string | number | undefined>
} | void)
```

#### onShow
```ts
onShow?: (isAnimationComplete: boolean) => void
```

#### onHide
```ts
onHide?: (isAnimationComplete: boolean) => void
```

#### onClickDayName
```ts
onClickDayName?: ({dayIndex, datepicker}: {dayIndex: number, datepicker: AirDatepicker<E>}) => void
```

#### onBeforeSelect
```ts
onBeforeSelect?: ({date, datepicker}: {date: Date, datepicker: AirDatepicker}) => boolean;
```

#### onFocus
```ts
onFocus?: ({date, datepicker}: {date: Date, datepicker: AirDatepicker}) => void;
```

### Full Field Table
See [configuration.md](configuration.md) for the full field table with defaults.
```

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

### getView()

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Returns the current view of the datepicker.

```APIDOC
## getView()

### Description
Returns the current view of the datepicker.

### Method
getView

### Signature
`getView(): AirDatepickerViews`

### Parameters
None.

### Returns
- **AirDatepickerViews** - The current view: `'days'`, `'months'`, or `'years'`.
```

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

### render() method

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/datepicker-cell.md

Fills cell content and refreshes all state classes. Returns $cell. Cell html is customData.html when provided, else day-of-month number for days (empty when !showOtherMonths && isOtherMonth), locale[opts.monthsField][month] for months, the year for years (empty when !showOtherYears && isOtherDecade).

```javascript
render = () => {
    this.$cell.innerHTML = this._getHtml();
    this._handleClasses();
    return this.$cell;
}
```

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

### prev()

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/api-reference/air-datepicker-methods.md

Moves the datepicker to the previous month/year/decade depending on the current view.

```APIDOC
## prev()

### Description
Moves the datepicker to the previous month/year/decade depending on the current view.

### Method
prev

### Signature
`prev(): void`

### Parameters
None.

### Returns
`void`
```

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

### Export AirDatepicker from src/index.js

Source: https://github.com/t1m0n/air-datepicker/blob/v3/_autodocs/README.md

The source entry point exports exactly one symbol: the AirDatepicker class. Everything else is reachable only via deep imports of source files or via node_modules/air-datepicker for compiled bundles.

```javascript
export {default as AirDatepicker} from './datepicker';
```
Tokens:
Raw