A date picker

Press the field and a calendar opens under it.

What it does

• A field and a calendar as one unit. Pressing the field opens it; pressing a day picks it and closes it
• Month paging, with previous and next
• Japanese or English. The weekday row and the heading follow the language (2026年8月 or August 2026, 日月火… or Su Mo Tu…)
• The field text follows it too: 2026/08/04 in Japanese, 2026-08-04 in English
• Days spilling in from the neighbouring months get their own class, so CSS can grey them
• The picked day is highlighted
• A range can be shaded, from a start day to an end day handed in separately
• A span is built from two fields side by side

Using it

The calendar's HTML lives in the component. It is not in this screen and not in the designer's page; what the page holds is 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 your own handlers. Press a day and pickFrom arrives; page the month and showMonth arrives; press the field and openFrom arrives. The component never learns your class.

For a span, hand in the range to shade as well.

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

What the screen remembers

The component is not an actor and holds no state. These three live in the screen:

• which field is open
• which month is showing
• what has been picked

An actor would hold them, but then it would have to know who to tell when a day is picked. That is the screen, and the screen's class differs from one system to the next — the component's type would change with it, and it could no longer be shared.