Noora (0.81.4)
- 1.3.0

Date Picker

• •
• •
Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the date picker component
label :string

Label displayed on the trigger button
"Select date range"
name :string

The name attribute for the hidden input field
period :any

The currently selected range as a tuple {start_datetime, end_datetime}. Both values must be DateTime structs.
Required presets * :list

List of preset options. Each preset is a map with :id, :label, and optional :period keys. Period is a tuple of {amount, unit} where unit is :hour, :day, :week, :month, or :year
selected_preset :string

The ID of the currently selected preset
min :any

Minimum selectable date (Date, DateTime, or ISO8601 string)
max :any

Maximum selectable date (Date, DateTime, or ISO8601 string)
start_of_week :integer

The day the week starts on (0 = Sunday, 1 = Monday, etc.)
0
disabled :boolean

Whether the date picker is disabled
false
on_period_change :string

Event handler name for when the selected date range changes
on_cancel :string

Event handler name for when the cancel button is clicked
open :boolean

Whether the date picker should be open by default (useful for storybook)
false
rest :global

Additional HTML attributes
actions :slot

Action buttons for the footer (e.g., Cancel and Apply). Use JS.dispatch("phx:date-picker-cancel", detail: %{id: id}) and JS.dispatch("phx:date-picker-apply", detail: %{id: id}) to trigger the date picker's cancel and apply actions.

 
<:actions>
  <button
    type="button"
    class="noora-button"
    data-variant="secondary"
    data-size="medium"
    phx-click={JS.dispatch("phx:date-picker-cancel", detail: %{id: "date-picker-default"})}
  >
    Cancel
  </button>
  <button
    type="button"
    class="noora-button"
    data-variant="primary"
    data-size="medium"
    phx-click={JS.dispatch("phx:date-picker-apply", detail: %{id: "date-picker-default"})}
  >
    Apply
  </button>
</:actions>