API

Air Datepicker has a convenient API that gives even more control over the component. The methods are accessed via a reference to the calendar instance:

let dp = new AirDatepicker('#el');

dp.show();

Methods

show()

Shows calendar.

hide()

Hides calendar.

Goes to the next month/year/decade.

Goes to the prev month/hear/decade.

selectDate(date | date[], opts?)

Selects one or several dates if array is passed

date
Date | string | number
 — a date in the Date format, or a string in ISO format, or a time in milliseconds. If a string or number cannot be converted to a date, this value will be ignored.
opts.updateTime
boolean
 — if you pass true, the time from the passed date will be set to the value of the timepicker. By default, false - when selecting a date, the current time is set.
opts.silent
boolean
 — if true, then onSelect() will not be called.
unselectDate(date)

Unselected passed date

date
Date | string | number
 — date, which should be deleted
clear(opts)

Clears all selected dates.

opts.silent
boolean
 — if true, then onSelect() will not be called.
formatDate(date, format)

Formats date in passed format.

date
Date | string | number
 — date which must be formatted
format
string
 — date format, accepts tokens from dateFormat option. You could see available tokens in documentation section
destroy()

Destroys calendar instance. Remove itself from DOM tree and all events from target element.

update(newOpts, params?)

Updates calendar options. Using this method, you can set new values for the minimum or maximum dates, change the calendar language, etc.

newOpts
object
 — new calendar options, almost all options that can be passed initially are supported.
params.silent
boolean
 — if true then onSelect and onChangeView callbacks won't be triggered
setCurrentView(view, params?)

Sets the new value of the calendar view.

view
"days" | "months" | "years"
 — new view
params.silent
boolean
 — if true, then onChangeView won't be triggered
setViewDate(date)

Sets a new date for displaying the calendar. It is used when, for example, you need to show some other month without having to select a date.

date
Date | string | number
 — a new date. If it is not possible to convert a string or a number to a date, the call is ignored.
setFocusDate(date, opts?)

Sets the focus to the cell with the passed date.

date
Date | string | number
 — a new date. If it is not possible to convert a string or a number to a date, the call is ignored.
opts.viewDateTransition
boolean
 — if true and the new date is outside the current view date, the new view date will be set.
up(date?)

Switch to the next view type. The view options are in order from days -> months -> years.

date
Date | string | number
 — if a date is passed, the display date will be changed when changing the view.
down(date?)

Switching to the previous view type.

date
Date | string | number
 — if a date is passed, the display date will be changed when changing the view.
getViewDates(view?)
(days|months|years) => Date[]

Returns all dates that should be currently displayed in calendar.

disableDate(date)
((date: Date|string|number|Array<Date|string|number>)) => void

Disables one or multiple dates.

enableDate(date)
((date: Date|string|number|Array<Date|string|number>)) => void

Enables dates previously disabled.

Properties

$datepicker
HTMLDivElement

DOM element of the calendar.

$el
HTMLInputElement

DOM element on which calendar was initialized. Type of the element depends on generic value, which can be passed with initialization. By default it is HTMLInputElement.

viewDate
Date

Current view date.

currentView
"days" | "months" | "years"

Current view of the calendar.

selectedDates
Date[]

An array of selected dates.

focusDate
Date | false

A focused date.

visible
boolean

Is calendar visible.

disabledDates
Set<string>

Set of disabled dates

isDestroyed
boolean

If true then calendar has been destroyed with destroy() method