Corex · Elixir Phoenix Framework UI Library

Minimal (single)

Select a date

    <.date_picker>
  <:label>Select a date</:label>
  <:trigger>
    <.heroicon name="hero-calendar" />
  </: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>

Range

From To

    <.date_picker
  selection_mode="range"
  value="2024-06-01,2024-06-15"
  translation={%Corex.DatePicker.Translation{open_calendar: "Select date range", close_calendar: "Select date range", input: "Date range"}}
  class="date-picker"
>
  <:label>Range</: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>

Multiple

    <.date_picker
  selection_mode="multiple"
  max_selected_dates={3}
  value="2024-06-03,2024-06-10,2024-06-17"
  translation={%Corex.DatePicker.Translation{open_calendar: "Select dates", close_calendar: "Select dates", input: "Dates"}}
  class="date-picker"
>
  <:label>Multiple</: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>