DevactionUI.DateRange (devaction_ui v0.2.3)

Copy Markdown View Source

A button that shows a range of dates and opens, in a DevactionUI.Popover, a panel to change it: a column of ready-made ranges (Today, Last 7 days, This month, a milestone of the project, Custom), two months side by side with the band of the range, a dot on today and a preview of the range under the pointer, and a footer with how many days are picked, Cancel and Apply. An optional column on the right (the aside slot) takes whatever goes with the range, such as DevactionUI.TimeField.

What is picked stays pending until Apply: it then goes into two hidden inputs, name_from and name_to, as ISO dates, the trigger shows it (1 Oct – 15 Oct 2026, written by the browser's Intl in the locale given) and the hook fires input so phx-change hears it. Cancel, Esc and a press outside drop what was picked. The keys are those of DevactionUI.DatePicker: arrows move a day or a week, PageUp and PageDown a month, Home and End the week, Enter picks; the pure date logic is dates.js, shared with it.

The server gives it what only it knows: today in the workspace's time zone, the min, and the presets as ISO dates (a preset whose range is the picked one is shown pressed, and Custom, the preset with no dates, when none is). The element keeps the browser's months and text, so a new value is not drawn: give it a new id, or send it JS.dispatch("devaction:date-range-set", to: "#period", detail: %{from: "2026-10-01", to: "2026-10-15"}). Every word is an attr or a slot.

Summary

Functions

picker(assigns)

Functions

picker(assigns)

Attributes

  • id (:string) (required)
  • name (:string) (required) - the hidden inputs are name_from and name_to, with ISO dates.
  • label (:string) (required) - names the panel, e.g. Choose the period.
  • value (:any) - the applied range: {from, to} of ISO dates or Dates, or nil. Defaults to nil.
  • today (:string) (required) - today's ISO date in the workspace's time zone.
  • min (:string) - the first ISO date that can be picked. Defaults to nil.
  • locale (:string) - the language of the month and day names and of the trigger. Defaults to "en".
  • week_start (:integer) - 0 for Sunday, 1 for Monday. Defaults to 0.
  • capitalize (:boolean) - upper-case the first letter of each month title. Defaults to false.
  • align (:atom) - the edge of the trigger the panel lines up with. Defaults to :start. Must be one of :start, or :end.
  • portal (:boolean) - draw the panel at the level of document.body, so a container with overflow does not clip it (see DevactionUI.Popover). Defaults to false.
  • placeholder (:string) (required) - what the trigger says while there is no range, e.g. Choose the period.
  • previous_label (:string) (required)
  • next_label (:string) (required)
  • presets_label (:string) - names the column of ready-made ranges for assistive technology. Defaults to nil.
  • count_label (:string) (required) - the footer text for a range of days; %{count} is filled in, as in %{count} days selected.
  • one_label (:string) - the footer text for a range of one day (1 day selected); count_label when empty. Defaults to nil.
  • pending_label (:string) - the footer text once the start is picked and the end is not, e.g. Pick the end date. Defaults to nil.
  • cancel_label (:string) (required)
  • apply_label (:string) (required)
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon - the calendar icon at the start of the trigger; it gets 16px.
  • prev_icon - the icon of the previous month button.
  • next_icon - the icon of the next month button.
  • preset - a ready-made range; its text is the content. One with no from and to is the Custom entry, shown pressed when no other fits. Accepts attributes:
    • from (:string) - an ISO date.
    • to (:string) - an ISO date.
  • aside - the column on the right of the months, e.g. a DevactionUI.TimeField.