Date Time Picker

A calendar-based component for date and time selection.

<.date_time_picker name="scheduled_appointment" />

Basic Configuration

Configure the date time picker with labels, sublabels, descriptions, placeholder, and help text to provide additional context for datetime selection fields.

<.date_time_picker
  name="appointment_time"
  label="Appointment Time"
  placeholder="Select a date and time"
  description="Please select a date and time for your appointment"
  sublabel="Required"
/>

Form Integration

Bind the date time picker to Phoenix forms for automatic form state management, validation handling and error messages. Note that the field value must be a NaiveDateTime or DateTime struct.

Changes: %{}

<.form :let={f} for={to_form(%{})} phx-change="validate">
  <.date_time_picker field={f[:datetime]} />
</.form>

Time Configuration

Time Format

Configure the time input format between 12-hour and 24-hour representations. The component automatically adjusts the interface and validation based on the selected format.

<.date_time_picker
  name="24h_time_format"
  time_format="24"
  display_format="%d/%m/%Y %H:%M"
/>

Display Format

Specify custom datetime formats using strftime patterns. Time-related format specifiers (%H, %M, %S, %I, %p) can be combined with date patterns.

<.date_time_picker
  name="datetime"
  display_format="%B %-d, %Y at %I:%M %p"
  value={DateTime.utc_now()}
/>