The single-date picker, a port of calendar-date/calendar-date.tsx.
Renders as <calendar-date> with the same part attributes, aria attributes
and keyboard behaviour as Cally, in the light DOM.
type Msg
= CalendarMsg Cally.Date.Msg
| Picked Cally.Date.Value
config : Cally.Date.Config Msg
config =
Cally.Date.defaultConfig
{ id = "start-date"
, today = model.today
, locale = Cally.Locale.enGB
, toMsg = CalendarMsg
, onChange = Picked
}
view =
Cally.Date.view config
model.value
model.calendar
[ Cally.Month.view { offset = 0 } ]The value is yours: view and update both take it, and onChange hands you
the new one.
Everything the picker remembers for itself: which day the roving
tabindex is on, and which months are on screen.
Opaque. Route it back with update through Config.toMsg.
Everything Cally takes as a prop, plus the messages this picker sends you.
id prefixes every DOM id the picker renders, so it must be unique on the page
and stable across renders; focus uses those ids.
How the previous and next buttons move: a whole page of months at a time,
or one month at a time. Cally's page-by.
What focus should put the browser focus on.
A Config with Cally's defaults: one month, paged by months, narrow
weekday names, no outside days, no week numbers, and the locale's own first day
of the week.
The starting model. Focus lands on the value, or on today when there is
no value, clamped to min and max.
Render the picker. The children are the months, and anything else that
reads the Context; each one is applied to the Context so it can sit
anywhere in the tree.
The update you wire into your own.
Consumer callbacks (onChange, onFocusDay, onPageChange) come back as
commands, so they arrive as ordinary messages on the next update. The command
also carries the Browser.Dom.focus call that keyboard navigation needs.
The pure core of update.
events are the callbacks the message produced, in the order Cally dispatches
them, and focus is the element the picker wants the browser focus on
afterwards (Cally's setTimeout(focus)). update is this function with the
two turned into commands; tests use this one.
Put the browser focus on the day that holds tabindex="0", or on one of
the paging buttons. Cally's focus({ target }).
Move the roving focus, Cally's focused-date property. The date is clamped
to min and max, and the page follows it.
The Context this picker hands its children. Exposed so you can build a
child on your own, and so tests can inspect it.
What this picker selects: one date, or none.