Date Picker

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

What the Date Picker Component Does

The Date Picker component is like a calendar on your phone but inside your Salesforce. It shows a calendar with the current month and year, and users can click on a day to select it. You can also add buttons or menus to move between months and years quickly. Users can add extra details once a date is picked, like scheduling a task or event. This component is handy whenever users need to choose a date, such as in scheduling tools, forms, or reports.


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 simultaneously 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 Date Picker

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


Specifications

Attributes

Events

Styling Hooks

Last updated