# `PUI.DatePicker`

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 |
| `week_start` | `:monday | :sunday` | `:monday` | First day of the week in the calendar grid |
| `show_overlap` | `boolean` | `true` | Shows days from adjacent months in the calendar grid |
| `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 |

# `date_picker`

## 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`.
* `week_start` (`:atom`) - Defaults to `:monday`. Must be one of `:monday`, or `:sunday`.
* `show_overlap` (`: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`

## 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`.
* `week_start` (`:atom`) - Defaults to `:monday`. Must be one of `:monday`, or `:sunday`.
* `show_overlap` (`: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`

---

*Consult [api-reference.md](api-reference.md) for complete listing*