Built-in locales, week-start-day, and full control over month & weekday labels
month_names and weekday_names render as the native pipe-delimited
month-names / weekday-names HTML attributes (no
hook needed). At runtime the same overrides go through
push_update(socket, id, month_names: [...]), which sets the
monthNames / weekdayNames JS properties. When
both are set, the property wins.
month_names is [0]=January … [11]=December (matches
Date.getMonth()), and weekday_names is
always authored Sunday-first: [0]=Sunday …
[6]=Saturday (matches Date.getDay()). week_start_day
only rotates the display — you never re-order the list.
The locale attribute selects bundled UI strings and drives
Intl-based month/weekday names. Built-ins: en, de,
fr, es (auto detects from the browser).
<.web_daterangepicker locale="de" />
week_start_day takes "auto" (locale-based) or "0"–"6"
(0=Sunday … 6=Saturday). It rotates which day column comes first —
the day cells underneath stay aligned.
weekday_names overrides the header labels with a list of exactly 7 entries,
authored Sunday-first. To make the rotation visible we prefix each Czech
abbreviation with its 1-based visible column position, built in Elixir by
numbered_weekdays/1 with an interpolated label (see the code below). Column 1
always reads "1 …", but the Czech day underneath changes with the start day —
proof the component rotates the display while we never re-order the list.
@czech_weekdays ~w(Ne Po Út St Čt Pá So) # authored Sunday-first: [0]=Sun … [6]=Sat
# Number each day by its 1-based visible column for the given start day, then store the
# composite label back at its Sunday index (the component rotates the display, not the list).
defp numbered_weekdays(week_start_day) do
Enum.map(0..6, fn sunday_index ->
column = rem(sunday_index - week_start_day + 7, 7) + 1
"#{column} #{Enum.at(@czech_weekdays, sunday_index)}"
end)
end
# week_start_day="3" → numbered_weekdays(3) = ["5 Ne","6 Po","7 Út","1 St","2 Čt","3 Pá","4 So"]
# …which the component rotates for display to: 1 St 2 Čt 3 Pá 4 So 5 Ne 6 Po 7 Út
<.web_daterangepicker week_start_day="3" weekday_names={numbered_weekdays(3)} />
| List position | [0] | [1] | [2] | [3] | [4] | [5] | [6] |
|---|---|---|---|---|---|---|---|
| Day of week | Sun | Mon | Tue | Wed | Thu | Fri | Sat |
| Czech label | Ne | Po | Út | St | Čt | Pá | So |
month_names overrides month labels with a list of exactly 12 entries, in
calendar order ([0]=January … [11]=December). No rotation — the
list is always January → December.
<.web_daterangepicker
month_names={~w(Leden Únor Březen Duben Květen Červen Červenec Srpen Září Říjen Listopad Prosinec)} />
Combine locale, week_start_day, month_names, and
weekday_names for a fully localized picker. Czech convention starts the week on
Monday.
The upstream page sets el.monthNames = [...] from a <script>.
The LiveView equivalent is a server-driven push_update/3 — useful when the names
arrive from a translation bundle or a language switch. It sets the
monthNames / weekdayNames properties, which win over any attribute.
(Requires hook=true.)
def handle_event("polish", _params, socket) do
{:noreply,
WebDaterangepicker.push_update(socket, "js-names",
# [0]=January … [11]=December
month_names: ~w(Styczeń Luty Marzec Kwiecień Maj Czerwiec Lipiec Sierpień Wrzesień Październik Listopad Grudzień),
# [0]=Sunday … [6]=Saturday
weekday_names: ~w(Nd Pn Wt Śr Cz Pt So))}
end
A list must have exactly 12 (months) or 7 (weekdays) non-empty segments.
A wrong count or an empty segment is ignored — the picker falls back to
locale names and emits a console.warn naming the attribute. Open your DevTools
console to see it.
// Console output:
// [web-daterangepicker] "weekday-names" ignored: expected exactly 7
// pipe-delimited segments, got 3. Falling back to locale names.
(pick a date anywhere on this page)