# `PhiaUi.Components.DateTimePicker`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/calendar/date_time_picker.ex#L1)

Date-and-time selection input — styled native `<input type="datetime-local">`.

Wraps the browser's native datetime-local picker with PhiaUI's input styling
(borders, focus ring, size variants, error state). Supports standalone use or
Phoenix form field integration with changeset error display.

Present in every major UI kit: Mantine `DateTimePicker`, Ant Design `DatePicker`
(showTime), MUI `DateTimePicker`, React Aria `DateRangePicker`.

Zero JavaScript — uses the native browser datetime-local control.

## Examples

    <%!-- Standalone --%>
    <.date_time_picker id="start" name="start_at" label="Start Date & Time" value="2026-03-04T10:30" />

    <%!-- With seconds precision --%>
    <.date_time_picker id="ts" name="timestamp" with_seconds={true} />

    <%!-- Form field integration --%>
    <.date_time_picker
      id="event_at"
      name={@form[:scheduled_at].name}
      value={@form[:scheduled_at].value}
      errors={Enum.map(@form[:scheduled_at].errors, &translate_error/1)}
      label="Scheduled At"
    />

# `date_time_picker`

## Attributes

* `id` (`:string`) - HTML `id` for the input and label `for` link. Defaults to `nil`.
* `name` (`:string`) - HTML `name` for form submission. Defaults to `nil`.
* `value` (`:string`) - Current datetime value as `"YYYY-MM-DDTHH:MM"` or `"YYYY-MM-DDTHH:MM:SS"`. Defaults to `nil`.
* `label` (`:string`) - Label text rendered above the input. Defaults to `nil`.
* `description` (`:string`) - Helper text rendered below the label. Defaults to `nil`.
* `errors` (`:list`) - List of error message strings. Defaults to `[]`.
* `with_seconds` (`:boolean`) - When `true`, sets `step="1"` so seconds are shown in the native picker. Defaults to `false`.
* `disabled` (`:boolean`) - Disables the input. Defaults to `false`.
* `size` (`:atom`) - Input height/padding: `:sm` (h-8), `:default` (h-10), `:lg` (h-12). Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `class` (`:string`) - Additional CSS classes merged onto the input. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the `<input>` element. Supports all globals plus: `["required", "placeholder", "phx-debounce", "min", "max"]`.

---

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