Date picker

Clicking the field opens a calendar below it.

Features

• The field and the calendar form one unit. Clicking the field opens it; clicking a day selects it and closes it
• Month paging (previous and next)
• Japanese and English. The weekday row and the heading switch (2026年8月 / August 2026, 日月火… / Su Mo Tu…)
• The field's text format follows the language (2026/08/04 in Japanese, 2026-08-04 in English)
• Days from adjacent months get a separate class, so the CSS can dim them
• The selected day is highlighted
• A range from a start date to an end date can be highlighted
• Two fields side by side make a date range input

Usage

The calendar's HTML is in the component, not in the screen or the designer's page. The page provides only the CSS.

Picker month: shown day: one lang: lang open: (open = #from)
       pick: #pickFrom move: #showMonth toggle: #openFrom

pick:, move:, and toggle: take the names of the screen's handlers. Clicking a day sends pickFrom, paging the month sends showMonth, and clicking the field sends openFrom to the screen. The component does not know the screen's class.

For a date range, pass the range to highlight as well.

Picker month: shown day: to mark: from to: to
       lang: lang open: (open = #to)
       pick: #pickTo move: #showMonth toggle: #openTo

State is held by the screen

The component is not an actor and holds no state. The screen holds:

• which field is open
• which month is displayed
• which day is selected

If the component were an actor, it could hold these, but it would then need to know the class of the screen to notify when a day is selected. That class differs between projects, so the component's type would change with each screen, and it could not be shared.