Comment on page

Date Picker

Visually represent a date and provide consistent means for navigating its parts.

Overview
The Date Picker Component
A user interface element that allows users to view and select dates in a calendar format.
Used in applications where users need to input or choose dates, such as scheduling or task management tools.
Displays a calendar view with the current month and year prominently displayed at the top.
Calendar view includes a grid of days, with each day of the month represented by a cell in the grid.
It may include controls for navigating to different months or years, such as previous and next buttons, or a dropdown menu for selecting a specific year.
When the user clicks or taps on a day in the calendar, the Date Picker Component highlights the selected day and allows the user to input or choose additional information or options related to the date, such as a task or event.
Changing the Properties
Choosing Selection mode
The Calendar Component can be configured as single, multiple or interval mode. Only one single value can be selected at a time with the Single mode. Multiple mode, the user can select multiple dates. With Interval, the user can only select a date range (two dates).
Assigning Value
Adding Disabled or Marked Dates
Array of disabled dates. Array of marked date objects. A maximum of three markers can be displayed on a same date.
Adding Interactions
From the interactions panel, you can create interactions when users select a date or dates depending on the Selection Mode used. For example, you may want to redirect users to another screen or page when they select dates. 
Here is a complete list of actions you can add to the Date Picker. 
Styling the Calendar
From the Styles panel, you can customize styling attributes for the Date Picker: 
Text: to customize the calendar text color.
Background: to customize background colors for the Date Picker.
Multi Selected Border: to customize styling settings when an interval is selected as a selection mode.
You can find the instructions for styling here.
Examples
Setting
Value
Selection Mode
Interval
Label
My Button Menu
Icon Size
Medium
Menu Alignment
Left
Specifications
Attributes
Name
Type
Description
disabled
Boolean
If true, the Date Picker is disabled.
disabledDates
Date[]
Array of disabled dates.
hideNavigation
Boolean
Specifies if the Date Picker header should be hidden.
markedDates
CalendarMarkedDate[]
Array of marked date objects. A maximum of three markers can be displayed on a same date.
max
Date
Specifies the maximum date, which the Date Picker can show.
min
Date
Specifies the minimum date, which the Date Picker can show.
selectionMode
String
Specifies the selection mode of the calendar. Valid values include single, multiple and interval.
If single, only one date can be selected at a time. If multiple, the user can select multiple dates.
If interval, the user can only select a date range (two dates).
value
Date
The value of the selected date(s).
weekNumber
Boolean
If true, display a week number column.
Events
Name
Description
change
The event fired when the selected date is changed.
Styling Hooks
Name
Description
Text Color
To specify color for dates.
Disabled Text Color
To specify color for disabled dates.
Today Text Color
To specify color for today's date.
Weekdays Text Color
To specify color for weekdays.
Month Text Color
To specify color for month.
Selected Date Text Color
To specify color on selected dates.
Background Color
To specify a background color for the component.
Background Color Hover
To specify a background color for the component on hover.
Today Background Color
To specify a background color for today's date.
Selected Date Background Color
To specify a background color for selected dates.
Multi Selected Border Color
To specify a border color when multi dates are selected.
Multi Selected Border Style
To set a border style when multi dates are selected.

Setting	Value
Selection Mode	Interval
Label	My Button Menu
Icon Size	Medium
Menu Alignment	Left

Name	Type	Description
disabled	Boolean	If true, the Date Picker is disabled.
disabledDates	Date[]	Array of disabled dates.
hideNavigation	Boolean	Specifies if the Date Picker header should be hidden.
markedDates	CalendarMarkedDate[]	Array of marked date objects. A maximum of three markers can be displayed on a same date.
max	Date	Specifies the maximum date, which the Date Picker can show.
min	Date	Specifies the minimum date, which the Date Picker can show.
selectionMode	String	Specifies the selection mode of the calendar. Valid values include single, multiple and interval. If single, only one date can be selected at a time. If multiple, the user can select multiple dates. If interval, the user can only select a date range (two dates).
value	Date	The value of the selected date(s).
weekNumber	Boolean	If true, display a week number column.

Name	Description
change	The event fired when the selected date is changed.

Name	Description
Text Color	To specify color for dates.
Disabled Text Color	To specify color for disabled dates.
Today Text Color	To specify color for today's date.
Weekdays Text Color	To specify color for weekdays.
Month Text Color	To specify color for month.
Selected Date Text Color	To specify color on selected dates.
Background Color	To specify a background color for the component.
Background Color Hover	To specify a background color for the component on hover.
Today Background Color	To specify a background color for today's date.
Selected Date Background Color	To specify a background color for selected dates.
Multi Selected Border Color	To specify a border color when multi dates are selected.
Multi Selected Border Style	To set a border style when multi dates are selected.

Last modified 2mo ago