日付を選ぶ

入力欄をクリックすると、その下にカレンダーが開いて日付を選べます。

機能

• 入力欄とカレンダーが一組。欄をクリックすると開き、日をクリックすると選択されて閉じる
• 月送り（前月・翌月）
• 日本語と英語。曜日の並びと見出しが切り替わる（2026年8月 / August 2026、日月火… / Su Mo Tu…）
• 入力欄の表示形式も言語に合わせる（日本語 2026/08/04、英語 2026-08-04）
• 前後の月にはみ出した日には別の class が付く（CSS で薄く表示できる）
• 選択した日に色が付く
• 開始日から終了日までの範囲に色を付けられる
• 入力欄を二つ並べて期間を入力できる

使い方

カレンダーの HTML は部品が持っています。画面にもデザイナの HTML にもありません。ページ側に置くのは CSS だけです。

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

pick: move: toggle: には、画面のハンドラ名を渡します。日がクリックされると pickFrom、月送りがクリックされると showMonth、欄がクリックされると openFrom が画面に届きます。部品は使う側の画面のクラスを知りません。

期間を入力するときは、色を付ける範囲も渡します。

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

状態は画面が持つ

部品はアクタではなく、状態を持ちません。次の三つは画面が持ちます。

• どの欄が開いているか
• 表示中の月
• 選択された日

部品をアクタにするとこれらを部品の中に持てますが、選択された日を通知する相手（画面）のクラスを部品が知る必要が生じます。画面のクラスは案件ごとに違うので、部品の型が画面ごとに変わり、共通部品にできません。