Dark Logo

Urbix

CTRL D
Basic Date Picker

Create a basic date picker by initializing Air Datepickr with Air Datepickr("#basic-picker") to allow users to select a single date from a calendar.

Select date on initialization

For selecting initial date use option. selectedDates

Month selection

For choosing only month without any certain date you could use combination of two options view and minView - with first option we setting up current view of calendar and with second we set minimal possible view.

Mobile devices mode

Air Datepicker has a mode that allows you to open the calendar as a modal window - in this mode it appears in the center of the screen in slightly enlarged sizes to facilitate date selection.

Positioning

Position of the calendar is set up by position option - it can be either a string or a function.

Range of dates

For choosing range of dates use parameter {range:true}. After selecting both dates you could correct them by dragging active dates.

Timepicker

Pass {timepicker:true} to be able to pick time. By default the user's time is set. Start datetime value could be configured with parameter startDate.

Cells content

Air Datepicker allows you to change cells content anyway you want. Content, classes and status (active/disabled) are controlled by option {onRenderCell:({date, cellType})=>{})}.

Preinstalled buttons

To add buttons, use the buttons option - it accepts an array of strings or an array of objects with a description of the button.

Theme Customization

Layout:
Vertical
Horizontal
Semi Box
Content Width:
Default
Box
Layout Direction:
LTR
RTL
Layout Mode:
Light
Dark
System
Sidebar Size:
Default
Medium
Icon
Icon hover
Sidebar Color:
Light
Dark