PUI.DatePicker (pui v1.0.0-beta.3)

Date picker components built from a trigger button and a popover calendar.

The calendar grid is rendered server-side by a LiveComponent, while the existing popover hook handles positioning and open/close behavior.

Examples

<.date_picker
  id="published-on"
  name="published_on"
  label="Publish date"
  min={~D[2026-04-10]}
  max={~D[2026-04-30]}
/>

<.range_picker
  id="trip-range"
  from_name="trip_start"
  to_name="trip_end"
  label="Trip range"
>
  <:footer>
    <input
      type="time"
      class="border-input h-9 rounded-md border bg-transparent px-3 text-sm"
    />
  </:footer>
</.range_picker>

Common attributes

Both pickers support:

Name	Type	Default	Description
`id`	`string`	generated	Unique identifier used for the trigger and popup

`default_month`	`Date.t()	String.t()`	`nil`	Initial month shown when no date is selected
`min`	`Date.t()	String.t()`	`nil`	Minimum selectable day
`max`	`Date.t()	String.t()`	`nil`	Maximum selectable day

`selectable_month`	`boolean`	`true`	Shows native month and year selects in the calendar header
`placeholder`	`string`	picker-specific	Placeholder text shown before a value is selected
`label`	`string`	`nil`	Optional field label
`class`	`string`	`"w-full"`	Additional trigger classes
`content_class`	`string`	`""`	Additional popup classes
`errors`	`list`	`[]`	Error messages rendered below the picker
`show_errors`	`boolean`	`true`	Controls error rendering

Slots

Name	Required	Description
`footer`	—	Optional footer content rendered below the calendar grid

Summary

Functions

date_picker(assigns)

range_picker(assigns)

Functions

date_picker(assigns)

Attributes

id (:string) - Defaults to nil.
name (:string) - Defaults to nil.
value (:any) - Defaults to nil.
default_month (:any) - Defaults to nil.
min (:any) - Defaults to nil.
max (:any) - Defaults to nil.
selectable_month (:boolean) - Defaults to true.
placeholder (:string) - Defaults to "Pick a date".
class (:string) - Defaults to "w-full".
content_class (:string) - Defaults to "".
label (:string) - Defaults to nil.
field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:published_on]. Defaults to nil.
errors (:list) - Defaults to [].
show_errors (:boolean) - Defaults to true.

Slots

footer

range_picker(assigns)

Attributes

id (:string) - Defaults to nil.
from_name (:string) - Defaults to nil.
to_name (:string) - Defaults to nil.
from_value (:any) - Defaults to nil.
to_value (:any) - Defaults to nil.
default_month (:any) - Defaults to nil.
min (:any) - Defaults to nil.
max (:any) - Defaults to nil.
selectable_month (:boolean) - Defaults to true.
number_of_months (:integer) - Defaults to 2.
placeholder (:string) - Defaults to "Pick a date range".
class (:string) - Defaults to "w-full".
content_class (:string) - Defaults to "".
label (:string) - Defaults to nil.
from_field (Phoenix.HTML.FormField) - Defaults to nil.
to_field (Phoenix.HTML.FormField) - Defaults to nil.
errors (:list) - Defaults to [].
show_errors (:boolean) - Defaults to true.

Slots

footer