Date picker

New

Overview

A date picker wrapping a minimalist JS library.

HEEx

<.form
  for={@date_form}
  id="example-date-form"
  phx-change="validate-date"
  phx-submit="save-date"
  class="grid w-full max-w-sm gap-4"
>
  <DatePicker.date_picker
    field={@date_form[:starts_on]}
    label="Start date"
    sublabel="2026 only"
    description="Choose a date in 2026."
    min={~D[2026-01-01]}
    max={~D[2026-12-31]}
    locale="en-GB"
    errors={if @date_error, do: [@date_error], else: []}
    required
  />
  <div class="flex flex-wrap gap-2">
    <Button.button type="submit">Save date</Button.button>
    <Button.button kind={:outline} phx-click="reset-date">Set from server</Button.button>
    <Button.button kind={:ghost} type="reset">Reset date</Button.button>
  </div>
</.form>

Errors

When bound with field, validation errors render beneath the date picker.

HEEx

<.form for={@form}>
  <DatePicker.date_picker field={@form[:starts_on]} label="Start date" />
</.form>

Add this module

terminal

mix dizzy.add date_picker

Component API

DatePicker.date_picker

Attributes

Attributes for DatePicker.date_picker
Name	Type	Default	Values
`arrow`	`:boolean`	false	—
`calendar_label`	`:string`	"Choose date"	—
`close_label`	`:string`	"Close calendar"	—
`description`	`:string`	nil	—
`disabled`	`:boolean`	false	—
`errors`	`:list`	[]	—
`field`	`{:struct, Phoenix.HTML.FormField}`	nil	—
`first_day_of_week`	`:integer`	1	0, 1, 2, 3, 4, 5, 6
`hide`	`:boolean`	false	—
`id`	`:string`	nil	—
`label`	`:string`	nil	—
`locale`	`:string`	"en-US"	—
`max`	`:any`	nil	—
`min`	`:any`	nil	—
`name`	`:string`	nil	—
`offset`	`:integer`	8	—
`placement_strategy`	`:atom`	:flip	nil, :flip, :auto_placement
`readonly`	`:boolean`	false	—
`required`	`:boolean`	false	—
`rest`	`:global`	nil	—
`shift`	`:boolean`	true	—
`side`	`:atom`	:bottom_start	:top, :top_start, :top_end, :bottom, :bottom_start, :bottom_end, :left, :left_start, :left_end, :right, :right_start, :right_end
`strategy`	`:atom`	:fixed	:absolute, :fixed
`sublabel`	`:string`	nil	—
`value`	`:any`	nil	—

JavaScript hook

DizzyDatePicker

Connects Cally’s calendar to a native date input , emitting input events for Phoenix form changes. Synchronizes server updates, constraints, and resets. Phoenix JS commands control popup visibility; Floating UI positions it. Cally supplies calendar keyboard navigation and date selection. Requires the external cally and @floating-ui/dom npm packages.

mix dizzy.add includes the hook and performs any required asset setup automatically.