WeekDayPicker — a compact horizontal day-of-week selector.
Renders 7 day buttons in a single row. Supports single or multiple selection,
locale-aware labels (:en and :"pt-BR"), and disabled days. Integrates
with Phoenix forms via hidden inputs. Zero JavaScript.
Locales
| Locale | Labels |
|---|---|
"en" | Sun Mon Tue Wed Thu Fri Sat |
"pt-BR" | Dom Seg Ter Qua Qui Sex Sáb |
Modes
| Mode | Behaviour |
|---|---|
:single | One day selected; name without [] |
:multiple | Multiple days; name[] for form array |
Examples
<%!-- Single selection --%>
<.week_day_picker id="weekly-day" name="recurring_day" value={[@day]} on_change="set_day" />
<%!-- Multiple selection --%>
<.week_day_picker
id="working-days"
name="working_days"
mode={:multiple}
value={@working_days}
on_change="toggle_day"
/>
<%!-- Portuguese labels --%>
<.week_day_picker id="dias" name="dias" locale="pt-BR" />
<%!-- With disabled days --%>
<.week_day_picker id="wdp" name="day" disabled_days={["sat", "sun"]} />Summary
Functions
Renders a horizontal week-day picker.
Functions
Renders a horizontal week-day picker.
Examples
<.week_day_picker id="wdp" name="days" mode={:multiple} value={@selected_days} on_change="toggle_day" />Attributes
id(:string) (required) - Unique HTML id for the container.name(:string) (required) - Form field name for the hidden inputs.value(:list) - List of selected day values (e.g.["mon", "wed"]). Defaults to[].mode(:atom) - Selection mode — :single allows one day, :multiple allows many. Defaults to:multiple. Must be one of:single, or:multiple.locale(:string) - Locale for day label display. Supports "en" and "pt-BR". Defaults to"en".on_change(:string) - LiveView event fired on day click. Receives phx-value-day with the day value. Defaults tonil.disabled_days(:list) - List of day values to disable (e.g.["sat", "sun"]). Defaults to[].class(:string) - Additional CSS classes merged via cn/1. Defaults tonil.- Global attributes are accepted. HTML attributes forwarded to the container div.