DatePicker

mode で形を選び、送る名前と初めの値を渡します。single は name と value、range は startName・endName と start・end、flexible は startName・endName・kindName と初めの selection です。欄には単日を YYYY/MM/DD、期間を YYYY/MM/DD – YYYY/MM/DD で表示します。

欄の端のボタンでカレンダーを開きます。カレンダーで選んだ日付はその場で送信フィールドへ反映し、閉じても保持します。range では開いて最初に選んだ日が開始日、その後に選んだ日が終了日になり、開始日より前の日を選ぶと開始日も動きます。上部の終了日の欄にフォーカスすると、終了日から選び直せます。flexible は下部の「終了日」スイッチで期間に切り替えます。開始日がある時にShift＋クリックすると、その日までの期間になります。「クリア」は選択を空にして閉じます。

カレンダーは白いパネル（1px #bbb の枠、角丸5px、外への柔らかい影）です。上に月の名前（黒の通常の太さ）と、枠も塗りも持たない黒い矢印の月送りのボタンを置きます。その月の日は角の無い淡い青（#e3ebf8）の高さ24pxのセルに濃い紺の数字で、列の間は空けず、行の間だけを白い2pxで区切ります。前後の月の日は塗らずに灰色の文字にします。今日は黄色（#ffe582）の面、選んだ日（期間の開始日と終了日）はチェックボックスの選んだ状態と同じ淡い青の縦の塗りに紺の縁と紺の太字、期間の途中の日はメニューの選んでいる項目と同じ淡い青（#ddeefe）の面です。選べない日はセルの面をそのままにし、数字だけを灰色にします。「クリア」はカレンダーの下の中央に置いた、下線付きの青緑のリンクです。

日付は直接入力もできます。欄には YYYY/MM/DD（YYYY-MM-DD も可）、期間は二つの日付を「–」で区切って入力します（「~」「〜」「 - 」も受け付けます）。カレンダー上部の欄では 2026/9/1 のようなゼロ埋めしない日付も受け付けます。入力途中の不正な文字列は送信値に反映せず、欄の下に直し方を出します。

送信する値：日付は指定した名前へ YYYY-MM-DD で送り、表示用の文字列は送りません。single は name の一つ、range は startName・endName の二つを送ります。flexible はそれに加えて kindName へ single か range を送り、同じ日の期間も range のまま保ちます。未入力の日付と、flexible の単日の終了日は空文字を送ります。空の扱いはサーバー側で決めます。date[start] のような角括弧を含む名前もそのまま送り、入れ子への変換はサーバー側で行います。

required は未入力を誤りにし、range では開始日と終了日の両方を求めます。存在しない日付、範囲外の日付、開始日より前の終了日も誤りです。誤りは欄の下に理由を出し、直すまでフォームの送信を止めます。readonly は値を表示したまま送り、カレンダーは開きません。disabled は欄全体を使えなくし、値を送りません。

日付同士の上限・下限：min・max は固定の範囲です。minFrom は参照する日の当日以降、maxFrom は当日以前を許可します。参照先はDatePickerのルートID、または YYYY-MM-DD を値に持つ通常の input のIDで、ラベル・name・必須かどうかから関係を推測しません。{ id, offsetDays } で日数の差を付け（1 で翌日以降、-1 で前日以前）、期間の終了日を参照する時は bound: "end" にします。固定の min・max と併せると、両方を満たす日だけを許可します。

例えば受付日に maxFrom="response"、対応予定日に minFrom="received" を渡すと、受付日は対応予定日以前、対応予定日は受付日以降に限られます。原稿締切に maxFrom={{ id: "release", offsetDays: -1 }}、公開予定日に minFrom={{ id: "manuscript", offsetDays: 1 }} を渡すと、締切は公開日の前日まで、公開日は締切の翌日以降になります。

連動は参照先の変更・refresh()・フォームのリセットに追従し、相手の値は書き換えません。参照先が空・不正・ページに無い時は、その条件を外します。上限が下限より前になると選べる日が無くなり、欄の下にその旨を出します。条件から外れた既存の値は残したまま誤りを出し、直すまで送信を止めます。前後関係は保存先でも検証します。

変更のイベント：値を確定する前に取り消せる date-picker:beforechange を、確定した後に date-picker:change を発火します。送信フィールドにも標準の input・change を発火するので、フォームの変更の検知はそのまま使えます。外から送信フィールドの値を変えた時は、そのフィールドに input・change を発火するか、controllerの refresh() を呼んで表示を合わせます。フォームのリセットでは初めの値に戻します。

JavaScriptが無い時やPopover APIを使えないブラウザでは、標準の日付入力（type="date"）を表示します。range と flexible は開始日・終了日の二つの欄を置き、flexible には「日付の形式」の選択を加えます。送る名前と値の形は同じです。minFrom・maxFrom は連動しないので、サーバー側でも検証します。