Date Picker

A calendar-based component for single and multiple date selection.

<.date_picker name="date" />

Basic Configuration

Configure the date picker with labels, sublabels, descriptions, placeholder, and help text to provide additional context for date selection fields.

Event Date Required

Must be on a weekday (Monday-Friday)

<.date_picker
  name="date"
  label="Event Date"
  placeholder="Select a date"
  description="Must be on a weekday (Monday-Friday)"
  sublabel="Required"
/>

Form Integration

Bind the date picker to Phoenix forms for automatic form state management, validation handling and error messages.

Changes: %{}

<.form :let={f} for={to_form(%{})} phx-change="validate">
  <.date_picker field={f[:date]} />
</.form>

Date Constraints

Set date constraints using min and max attributes to limit the selectable date range. The component automatically handles disabled date states and navigation boundaries.

Must be within 30 days from today

<.date_picker
  name="project_deadline"
  display_format="%-d %B"
  min={Date.utc_today()}
  max={Date.add(Date.utc_today(), 30)}
/>

Selection Modes

Configure how users can select dates in the calendar interface.

Single Selection

Default mode that allows selecting a single date.

<.date_picker name="date" />

Multiple Selection

Enable selection of multiple non-consecutive dates.

<.date_picker
  name="holiday_date"
  placeholder="Select dates"
  multiple
/>

Display Options

Date Format

Specify custom date formats using strftime patterns. Support for standard ISO, regional, and custom date representations.

<.date_picker
  name="date"
  value={Date.utc_today()}
  display_format="%m/%d/%Y"
/>

<.date_picker
  name="date"
  value={Date.utc_today()}
  display_format="%d.%m.%y"
/>

<.date_picker
  name="date"
  value={Date.utc_today()}
  display_format="%B %d, %Y"
/>

Week Start

Configure the starting day of the week using numerical values (0-6). Supports different calendar week structures across regions.

<.date_picker
  name="holiday_date"
  placeholder="Select dates"
  week_start={1}
/>

Closing Strategy

Configure how the date picker handles the closing behavior after date selection.

Manual Mode

Keeps the calendar open after selection, allowing multiple adjustments without reopening.

<.date_picker name="date" close="manual" />

Confirm Mode

Adds confirmation and cancel buttons to explicitly confirm the date selection.

<.date_picker name="date" close="confirm" />

Configure how users navigate through months and years in the calendar interface.

Adds year navigation arrows alongside the standard month navigation controls.

<.date_picker name="date" navigation="extended" />

Replaces arrow controls with dropdown selectors for direct month and year selection.

<.date_picker name="date" navigation="select" />