Date Picker

Dropdown calendar for date selection, with single or multiple modes and day, month, or year granularity.

Basic

.heex 
<.date_picker name="date" />

Label and sublabel

Required
.heex 
<.date_picker name="event_date" label="Event date" sublabel="Required" />

Description and help text

Use description for the rule above the field and help_text for the hint below it.

We will confirm by email within one business day.

Pick any weekday in the next month.
.heex 
<.date_picker
  name="appointment"
  label="Appointment date"
  description="We will confirm by email within one business day."
  help_text="Pick any weekday in the next month."
/>

Custom placeholder

.heex 
<.date_picker name="due_date" placeholder="Choose a due date" />

Pre-selected value

Pass a Date, NaiveDateTime, DateTime, or ISO 8601 string.

.heex 
<.date_picker name="kickoff" value={Date.utc_today()} />

Sizes

.heex 
<.date_picker name="date" size="xs" />
<.date_picker name="date" size="sm" />
<.date_picker name="date" size="md" />
<.date_picker name="date" size="lg" />
<.date_picker name="date" size="xl" />

Disabled

.heex 
<.date_picker name="locked" value={Date.utc_today()} disabled />

Required selection

allow_deselect={false} prevents clearing the value once a date is chosen.

.heex 
<.date_picker
  name="contract_date"
  label="Contract date"
  value={Date.utc_today()}
  allow_deselect={false}
/>

Clearable

Set clearable to render a reset button inside the field. It only appears once a value is present, and clearing dispatches a change event so phx-change bindings are notified. Works in every mode. Multiple selection clears every date.

.heex 
<.date_picker name="renewal" label="Renewal date" value={Date.utc_today()} clearable />
<.date_picker name="blackout[]" label="Blackout dates" multiple clearable />
<.date_picker name="ship_date" label="Ship date" typeable clearable />

Error state

.heex 
<.date_picker
  name="deadline"
  label="Deadline"
  errors={["Please pick a date in the future"]}
/>

Leading icon

Use :inner_prefix to place an icon inside the toggle border.

.heex 
<.date_picker name="leading_icon_date" placeholder="Select a date">
  <:inner_prefix>
    <.icon name="hero-calendar" class="icon" />
  </:inner_prefix>
</.date_picker>

Outer prefix label

:outer_prefix renders content in an attached cell, sharing the field's border.

Due
.heex 
<.date_picker name="due" placeholder="Select a date">
  <:outer_prefix class="px-3 text-foreground-soft">Due</:outer_prefix>
</.date_picker>

Outer suffix action

Pair the field with a button or other action through :outer_suffix.

.heex 
<.date_picker name="filter_date" placeholder="Filter by date">
  <:outer_suffix>
    <.button variant="outline">Apply</.button>
  </:outer_suffix>
</.date_picker>

Min and max

Constrain the selectable range. Calendar navigation buttons disable past the boundaries.

.heex 
<.date_picker
  name="window"
  min={Date.utc_today()}
  max={Date.add(Date.utc_today(), 30)}
/>

Weekdays only

Use the :weekends shortcut to disable Saturdays and Sundays.

.heex 
<.date_picker name="business_day" disabled_dates={[:weekends]} />

Holiday calendar

Combine specific dates with recurring annual patterns. Disabled days are dimmed and struck through.

.heex 
<.date_picker
  name="delivery_date"
  disabled_dates={[
    ~D[2026-12-24],
    ~D[2026-12-31],
    {:month_day, 12, 25},
    {:month_day, 1, 1}
  ]}
/>

Recurring weekday pattern

Disable a specific weekday with {:weekday, n}, where 1 is Monday and 7 is Sunday.

Closed on Mondays
.heex 
<.date_picker
  name="clinic_visit"
  disabled_dates={[{:weekday, 1}]}
/>

US display format

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

European display format

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

Long display format

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

Multiple selection

Set multiple to toggle dates on and off. The toggle reads "X dates selected" once two or more are picked.

.heex 
<.date_picker
  name="holidays[]"
  label="Company holidays"
  multiple
  placeholder="Select holidays"
/>

Multiple within a range

Combine multiple with min/max for fixed-window selection like a fiscal year.

.heex 
<.date_picker
  name="pto[]"
  multiple
  min={~D[2026-01-01]}
  max={~D[2026-12-31]}
/>

Typeable input

Replaces the toggle with a text input. Separators are inserted automatically while typing.

.heex 
<.date_picker name="typed_date" label="Date" typeable />

Typeable with custom input format

Override the input mask with input_format. Any combination of dd, mm, and yyyy with a single-character separator is valid.

.heex 
<.date_picker
  name="dob"
  typeable
  input_format="dd/mm/yyyy"
/>

Month granularity

Renders a 3-column month grid. Selected values normalize to the first of the month.