PhiaUi.Components.DateTimePicker (phia_ui v0.1.17)

Copy Markdown View Source

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"
/>

Summary

Functions

date_time_picker(assigns)

Functions

date_time_picker(assigns)

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"].