Setup Options

These options are the properties that can be passed to the datepicker to customize its behavior.

className

Type	string

Add custom classes.

dateFormat

Type	string	Default	YYYY-MM-DD

Get the formatted date according to the string passed in.

If you want to pass escape characters, you can use square brackets to wrap the text. (e.g. YYYY [escaped text] MM will output 2024 escaped text 01)

• YY - 2-digit year
• YY1 - 2-digit year of the first year in current decade
• YY2 - 2-digit year of the last year in current decade
• YYYY - full year
• YYYY1 - full year of the first year in current decade
• YYYY2 - full year of the last year in current decade
• M - month
• MM - month with leading zero
• MMM - short month name
• MMMM - full month name
• D - day
• DD - day with leading zero
• d - weekday index
• dd - min weekday name
• ddd - short weekday name
• dddd - full weekday name

locale

Type	Locale

Language of the calendar. By default, english language is used.

interface Locale {
  name: string;
  months: string[];
  monthsShort: string[];
  weekStart?: number;
  weekdays: string[];
  weekdaysShort: string[];
  weekdaysMin: string[];
  formats: { time: string; date: string };
  placeholder?: string;
}

inline

Type	boolean	Default	false

Makes the calendar to be permanently visible.

selectedDate

Type	Date

The active date.

minDate

Type	Date

The minimum date of calendar, Can't be set to less than 0100-01-01

maxDate

Type	Date

The maximum date of calendar, Can't be set to more than 9999-12-31

view

Type	Date	Default	days

The initial view of the calendar. (e.g. days | months | years)

minView

Type	Date	Default	days

The minimum view of the calendar. The values are same as view.

showOtherMonths

Type	boolean	Default	true

If true, dates from other months will be displayed in days view.

selectOtherMonths

Type	boolean	Default	true

If true, it will be possible to select dates from other months.

moveOtherMonths

Type	boolean	Default	true

If true , then selecting dates from another month will be causing transition to this month.

shortcuts

Type	boolean	Default	true

Enables keyboard navigation.

Move cell focus.

Command	Description
↑ ↓ ← →	Move cell focus.
Ctrl + → or ↓	Move to the next month
Ctrl + ← or ↑	Move to the previous month
Shift + → or ↓	Move to the next month
Shift + ← or ↑	Move to the previous month
Alt + → or ↓	Move to the next month
Alt + ← or ↑	Move to the previous month

navigationLoop

Type	boolean	Default	true

Whether to enable navigation when the maximum/minimum date is exceeded.

autoClose

Type	boolean	Default	true

If true, the calendar will be hidden after selecting the date.

toggleSelected

Type	boolean	Default	true

If true, then clicking on the active cell will remove the selection from it.

titleFormat

Type	TitleFormat	Default	{ days: 'MMMM, <i>YYYY</i>', months: 'YYYY', years: 'YYYY1 - YYYY2' }

Title templates in the calendar navigation.

interface TitleFormat {
  days: string;
  months: string;
  years: string;
}

position

Type	string	Default	bottom-start

Position of the calendar relative to the input field.

• top | top-start | top-end
• bottom | bottom-start | bottom-end
• right | right-start | right-end
• left | left-start | left-end

animation

Type	boolean	Default	true

If true, the calendar will open & close with animation.

backdrop

Type	boolean	Default	false

If true, calendar apper with backdrop

readOnly

Type	boolean	Default	false

If true, it will not be able to edit dates at input field.

placeHolder

Type	string

Datepicker placeholder

theme

Type	light | dark	Default	light

If, dark, datepicker's color scheme set to dark mode

size

Type	small | normal	Default	normal

The size of datepicker input.

buttons

Type	ButtonPresetType | ButtonPresetType[] | ButtonOptions | ButtonOptions[]

Add action buttons to the calendar. You could add two pre defined buttons or custom buttons.

ButtonPresetType

• clear: add "Clear" button. Clear the selected date
• today: add "Today" button. Set the selected date to today

ButtonOptions

interface ButtonPresetOptions {
  id?: string; // button id
  className?: string; // button class
  dataset?: Record<string, string>; // button data attributes
  attrs?: Record<string, string>; // button attributes
  innerHTML?: string; // button inner html
  onClick?: (event: MouseEvent, datepicker: SnowDatePicker) => any; // button click event
}
```import { escape } from 'core-js/fn/regexp';