Date Time Picker

A calendar-based component for date and time selection.

Basic

<.date_time_picker name="scheduled_appointment" />

Basic Configuration

Appointment Time Required

Please select a date and time for your appointment

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

Changes: %{}

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

Time Format

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

Display Format

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

The date time picker shares many features with the date picker component. See the date picker documentation for detailed information about these features.