Corex · Elixir Phoenix Framework UI Library

On value change (Server)

Select a date

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.date_picker
  translation={%Corex.DatePicker.Translation{open_calendar: "Select date", close_calendar: "Select date", input: "Select date"}}
  class="date-picker"
  on_value_change="dpe_on_value_server"
>
  <: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("dpe_on_value_server", %{"id" => id, "value" => value} = params, socket) do
  IO.inspect(params, label: "dpe_on_value_server")
  {:noreply, socket}
end

On open change (Server)

Select a date

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.date_picker
  translation={%Corex.DatePicker.Translation{open_calendar: "Select date", close_calendar: "Select date", input: "Select date"}}
  class="date-picker"
  on_open_change="dpe_on_open_server"
>
  <: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("dpe_on_open_server", %{"id" => id, "open" => open} = params, socket) do
  IO.inspect(params, label: "dpe_on_open_server")
  {:noreply, socket}
end

On value change (Client)

Select a date

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.date_picker
  translation={%Corex.DatePicker.Translation{open_calendar: "Select date", close_calendar: "Select date", input: "Select date"}}
  class="date-picker"
  on_value_change_client="date-picker-value-changed"
>
  <: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>

    const el = document.getElementById("date-picker-e-cv");
el?.addEventListener("date-picker-value-changed", (event) => {
  console.log(event.detail);
});

    const el = document.getElementById("date-picker-e-cv");
el?.addEventListener("date-picker-value-changed", (event: Event) => {
  console.log((event as CustomEvent<{ id: string; value: string }>).detail);
});

On open change (Client)

Select a date

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.date_picker
  translation={%Corex.DatePicker.Translation{open_calendar: "Select date", close_calendar: "Select date", input: "Select date"}}
  class="date-picker"
  on_open_change_client="date-picker-open-changed"
>
  <: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>

    const el = document.getElementById("date-picker-e-co");
el?.addEventListener("date-picker-open-changed", (event) => {
  console.log(event.detail);
});

    const el = document.getElementById("date-picker-e-co");
el?.addEventListener("date-picker-open-changed", (event: Event) => {
  console.log((event as CustomEvent<{ id: string; open: boolean }>).detail);
});