Comment on page
Visually represent a date and provide consistent means for navigating its parts.
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.
The Calendar Component can be configured as
interval mode. Only one single value can be selected at a time with the Single mode.
Multiplemode, the user can select multiple dates. With
Interval, the user can only select a date range (two dates).
Array of disabled dates. Array of marked date objects. A maximum of three markers can be displayed on a same date.
From the interactions panel, you can create interactions when users select a date or dates depending on the
Selection Modeused. For example, you may want to redirect users to another screen or page when they select dates.
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.
Last modified 2mo ago