aura
Home Aura
aura

Date Picker

Setting Values

You can initialize the date picker with predefined values in different modes:

  • Single Date: Use a single date string in YYYY-MM-DD format.

Copy to clipboard

  <aura:date-picker value="2025-03-05" />
  • Date Range: Specify a start and end date separated by a slash (/) when using the range attribute.

Copy to clipboard

  <aura:date-picker value="2025-03-05/2025-03-10" range />
  • Multiple Dates: Provide a comma-separated list of dates when using the multiple attribute.

Copy to clipboard

  <aura:date-picker value="2025-03-05,2025-03-10" multiple />

These values can be dynamically bound or hardcoded, depending on your application’s needs.

Attributes

The component supports the following attributes to customize its behavior:

  • withToday
    Displays a shortcut button to quickly select the current date. Only available in single-date mode.
    Default: false

  • clearable
    Adds a button to clear the selected date(s).
    Default: false

  • confirmable
    Adds a confirm button, requiring user confirmation before finalizing the selection. Works well with range and multiple modes for optimal control.
    Default: false

  • range
    Enables selection of a date range (start and end dates). Use with value in the format YYYY-MM-DD/YYYY-MM-DD.
    Default: false

  • multiple (New)
    Allows selection of multiple individual dates. Use with value in the format YYYY-MM-DD,YYYY-MM-DD. Combines powerfully with confirmable for controlled multi-date selection.
    Default: false

  • fixed
    Renders the calendar as read-only, preventing any date selection. Useful for display purposes.
    Default: false

  • min
    Sets the earliest selectable date in YYYY-MM-DD format.
    Default: None

  • max
    Sets the latest selectable date in YYYY-MM-DD format.
    Default: None

  • min-range
    Specifies the minimum number of days required in a range selection (only applies with range).
    Default: None

  • max-range
    Specifies the maximum number of days allowed in a range selection (only applies with range).
    Default: None

Usage Examples

Basic Single Date Picker

A simple date picker with a predefined label and value.

Copy to clipboard

<aura:date-picker label="Select Date" value="2021-09-01" />

With Today Shortcut

Adds a button to quickly select today’s date (e.g., March 30, 2025, based on the current date).

Copy to clipboard

<aura:date-picker withToday />

Clearable Selection

Allows users to clear their selection with a dedicated button.

Copy to clipboard

<aura:date-picker clearable />

Confirmable Selection

Requires user confirmation before applying the selected date(s).

Copy to clipboard

<aura:date-picker confirmable />

Date Range Selection

Enables picking a start and end date.

Copy to clipboard

<aura:date-picker range />

Multiple Date Selection (New)

Allows picking multiple individual dates, with a predefined example.

Copy to clipboard

<aura:date-picker value="2025-03-05,2025-03-10" multiple />

Min & Max Dates

Restricts selectable dates to a specific window (e.g., one week before and after today).

Copy to clipboard

<aura:date-picker 
    :min="today()->subDays(7)->format('Y-m-d')"
    :max="today()->addDays(7)->format('Y-m-d')"
/>

Minimum Range

Ensures a range selection spans at least 3 days.

Copy to clipboard

<aura:date-picker range min-range="3" />

Maximum Range

Limits a range selection to no more than 7 days.

Copy to clipboard

<aura:date-picker range max-range="7" />

Fixed (Read-Only) Calendar

Displays a non-interactive calendar.

Copy to clipboard

<aura:date-picker fixed />

Notes

  • The multiple mode is ideal for scenarios where users need to select non-consecutive dates, such as event scheduling or multi-day bookings.
  • Combine confirmable with range or multiple to give users a chance to review their selections before submission.
  • All dates should follow the YYYY-MM-DD format for consistency and compatibility.