DatePicker — calendar-based date input for single dates and date ranges.

The calendar grid is server-rendered. Navigation (prev/next month) sends LiveView events. Open/close is handled by the AvenUIDatePicker JS hook. No external date library required.

Single date example

<.date_picker
  id="birthday"
  name="birthday"
  label="Birthday"
  selected={@selected_date}
  on_change="date_selected"
/>

# Handle in LiveView:
def handle_event("date_selected", %{"date" => date_str}, socket) do
  date = Date.from_iso8601!(date_str)
  {:noreply, assign(socket, :selected_date, date)}
end

Date range example

<.date_picker
  id="booking"
  name="booking"
  label="Stay dates"
  mode="range"
  range_start={@check_in}
  range_end={@check_out}
  on_change="dates_selected"
/>

def handle_event("dates_selected", %{"start" => s, "end" => e}, socket) do
  {:noreply, assign(socket,
    check_in: Date.from_iso8601!(s),
    check_out: Date.from_iso8601!(e)
  )}
end

With Phoenix form field

<.date_picker
  id="dob"
  field={@form[:date_of_birth]}
  label="Date of birth"
/>

Navigation events

Add these handlers to any LiveView that uses a date_picker:

def handle_event("dp_prev_month_" <> id, _, socket) do
  socket = update(socket, :dp_month, &Date.beginning_of_month(Date.add(&1, -1)))
  {:noreply, socket}
end

def handle_event("dp_next_month_" <> id, _, socket) do
  socket = update(socket, :dp_month, &Date.beginning_of_month(Date.add(&1, 32)))
  {:noreply, socket}
end