日付を選ぶ

入力欄を押すと、その下に暦が開いて日付を選べます。

できること

• 入力欄と暦が一組。欄を押すと開き、日を押すと選ばれて閉じます
• 月送り。前月と翌月のボタンが付いています
• 日本語と英語。曜日の並びと見出しが切り替わります（2026年8月 と August 2026、日月火… と Su Mo Tu…）
• 欄の表示も言語に合わせます。日本語なら 2026/08/04、英語なら 2026-08-04
• 月をはみ出したますは別の class が付くので、CSS で薄く出せます
• 選んだ日に色が付きます
• 範囲を塗れます。開始日から終了日までを、別に渡した指定で塗ります
• 期間の入力は欄を二つ並べて作れます

使い方

暦の 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

画面が覚えること

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

• どの欄が開いているか
• いま何月を出しているか
• 何が選ばれているか

アクタにすれば部品の中に入りますが、そうすると「選んだ日を誰に知らせるか」を部品が知る必要が出ます。知らせる相手は画面で、画面のクラスは案件ごとに違います。部品の型が画面ごとに変わってしまい、使い回せなくなります。