Calendar Options
The DatePicker enables you to configure its popup Calendar.
Calendar Types
The DatePicker allows you to switch between the different Calendar layouts by using the calendarType
input property.
By default, the Calendar type is set to infinite
.
The available calendarType
values are:
infinite
(Default)classic
Displaying Other Month Days
Based on the calendarType
option the other month days are either displayed or hidden by default:
infinite
—Hides the other month days.classic
—Shows the other month days.
To change the default behavior set the showOtherMonthDays
property.
Navigation Animation
The DatePicker allows you to enable the navigation animation in the Classic Calendar by using the animateCalendarNavigation
input property.
By default, the navigation animation is disabled.
Focused Dates
The DatePicker enables you to handle the configuration of the focused calendar dates.
The Calendar always displays a focused date and, by default, the focused date is today's date. To change the focused date, use the focusedDate
property by setting it to a specific Date
value. The Date
value has to be a valid JavaScript Date
object.
Active View
To define the first view that the Calendar initially renders, use the activeView
property.
The CalendarView
type defines the following possible view options:
month
—Shows the days of the month.year
—Shows the months of the year.decade
—Shows the years of the decade.century
—Shows the decades of the century.
View Selection Depth
The DatePicker enables you to control the view depth to which the user can navigate.
To determine its navigation view depth, use the bottomView
property. To limit the topmost view that user can reach, use the `topView property.
Week Number Column
In the calendar of the DatePicker, you can render a column which displays the number of the weeks within the current month
view.
To show the calendar week number column, set the weekNumber
property.
Week Day Format
By default the DatePicker calendar displays the week days in a short format. To change the format, set the weekDaysFormat
property. The available options are:
short
(default)—Displays the week days in a short format (e.g., "mo").narrow
—Displays the week days in a narrow format (e.g., "m").abbreviated
—Displays the week days in an abbreviated format (e.g., "mon").