Date Picker

API

Set the value from a LiveView binding, from JS, or from the server.

Set value (Client binding)

Select a date

    <.action phx-click={Corex.DatePicker.set_value("date-picker-api-sv-client", "2024-01-15")} class="button ui-size-sm">
  Set to 2024-01-15
</.action>
<.action phx-click={Corex.DatePicker.set_value("date-picker-api-sv-client", "2024-12-25")} class="button ui-size-sm">
  Set to 2024-12-25
</.action>

<.date_picker
  translation={%Corex.DatePicker.Translation{open_calendar: "Select date", close_calendar: "Select date", input: "Select date"}}
  class="date-picker"
>
  <:label>Select a date</:label>
  <:trigger><.heroicon name="hero-calendar" class="icon" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" class="icon" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" class="icon" /></:next_trigger>
</.date_picker>

Set value (Client JS)

Select a date

    <.action
  phx-click={JS.dispatch("corex:date-picker:set-value",
    to: "#date-picker-api-sv-js",
    detail: %{value: "2024-01-15"},
    bubbles: false
  )}
  class="button ui-size-sm"
>
  Set to 2024-01-15
</.action>

    const el = document.getElementById("date-picker-api-sv-js");
if (!el) return;
el.dispatchEvent(
  new CustomEvent("corex:date-picker:set-value", { bubbles: false, detail: { value: "2024-12-25" } })
);

    const el = document.getElementById("date-picker-api-sv-js");
if (!el) return;
el.dispatchEvent(
  new CustomEvent<{ value: string }>("corex:date-picker:set-value", {
    bubbles: false,
    detail: { value: "2024-12-25" }
  })
);

Set value (Server)

Select a date

    <.action phx-click="date_picker_api_set_value" phx-value-date="2024-01-15" class="button ui-size-sm">
  Set to 2024-01-15
</.action>

<.date_picker translation={%Corex.DatePicker.Translation{open_calendar: "Select date", close_calendar: "Select date", input: "Select date"}} class="date-picker">
  <:label>Select a date</:label>
  <:trigger><.heroicon name="hero-calendar" class="icon" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" class="icon" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" class="icon" /></:next_trigger>
</.date_picker>

    def handle_event("date_picker_api_set_value", %{"date" => value}, socket) do
  {:noreply, Corex.DatePicker.set_value(socket, "date-picker-api-sv-server", value)}
end