onView(new Date(y, m - 1, 1))}>前月
{y}年{mrPad2(m + 1)}月
onView(new Date(y, m + 1, 1))}>翌月
{MR_WD.map((w, i) => (
{w}
))}
{cells.map((d, i) => d
?
:
)}
onPick(mrDay(today))}>今日
);
}
/** 年月日の選択。value / onChange は店の日付表記(上の「値の約束」)。
* label は読み上げ・E2E 用の名前(画面の見出しは呼び出し側が出す)。
* required のときは空にできない(消して離れると元の日付に戻す)。
* 読めない文字を打って離れたときも元に戻す(DS と同じ)。黙って別の日にしない。 */
function MrDatePicker({ value, onChange, label, placeholder = "yyyy年mm月dd日", required = false, width = 184, today }) {
const now = today || new Date();
const sel = mrUiToDate(value, now);
// 読めない値(旧デモデータの説明文など)はそのまま見せる(黙って消さない)。
const shown = sel ? mrFmtJa(sel) : (value == null ? "" : String(value));
const [text, setText] = React.useState(shown);
const [open, setOpen] = React.useState(false);
const [up, setUp] = React.useState(false);
const [focus, setFocus] = React.useState(false);
const [view, setView] = React.useState(() => { const b = sel || now; return new Date(b.getFullYear(), b.getMonth(), 1); });
const ref = React.useRef(null);
const inputRef = React.useRef(null);
React.useEffect(() => { setText(shown); }, [shown]);
React.useEffect(() => {
if (!open) return undefined;
const away = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", away);
document.addEventListener("touchstart", away);
return () => { document.removeEventListener("mousedown", away); document.removeEventListener("touchstart", away); };
}, [open]);
// 同じ日なら onChange を呼ばない("09/24" と "9/24" のような書き方の違いで差分を作らない)。
const emit = d => {
setText(d ? mrFmtJa(d) : "");
if (d) setView(new Date(d.getFullYear(), d.getMonth(), 1));
if (d ? mrSameDay(d, sel) : (value == null || String(value).trim() === "")) return;
if (onChange) onChange(d ? mrDateToUi(d, now) : "");
};
const commit = () => {
if (text === shown) return;
if (!text.trim()) { if (required) setText(shown); else emit(null); return; }
const d = mrParseTyped(text, now);
if (d) emit(d); else setText(shown);
};
const openCal = () => {
// 下に余白が無ければ上に開く(工程のモーダルの下の方の欄で、カレンダーが画面の外に出ないように)。
if (ref.current && ref.current.getBoundingClientRect && typeof window !== "undefined" && window.innerHeight) {
const r = ref.current.getBoundingClientRect();
const below = window.innerHeight - r.bottom;
setUp(below < 300 && r.top > below);
}
const b = mrParseTyped(text, now) || sel || now;
setView(new Date(b.getFullYear(), b.getMonth(), 1));
setOpen(true);
};
const bad = text !== shown && text.trim() !== "" && !mrParseTyped(text, now);
const lit = focus || open;
return (
// フォーカスが部品の外へ出たら(Tab で抜けたとき)カレンダーを閉じる。部品の中(カレンダーのボタン)なら開いたまま。
// Esc は入力欄でもカレンダーの中でも閉じる(中で押したときはフォーカスを入力欄へ戻す)。
{ if (open && ref.current && !ref.current.contains(e.relatedTarget)) setOpen(false); }}
onKeyDown={e => {
if (e.key !== "Escape" || !open) return;
e.stopPropagation(); setOpen(false);
if (inputRef.current && e.target !== inputRef.current) inputRef.current.focus();
}}>
setText(e.target.value)}
onFocus={() => setFocus(true)}
onBlur={() => { setFocus(false); commit(); }}
onClick={() => { if (!open) openCal(); }}
onKeyDown={e => {
if (e.key === "Enter") { e.preventDefault(); commit(); setOpen(false); }
else if (e.key === "ArrowDown" && !open) { e.preventDefault(); openCal(); }
}}
style={{ boxSizing: "border-box", width: "100%", height: 28, padding: "0 8px", borderRadius: "var(--radius-md)",
border: "1px solid " + (bad ? "var(--destructive)" : lit ? "var(--brand)" : "var(--input)"),
boxShadow: lit ? "var(--ring-focus)" : "none", background: "var(--card)", outline: "none",
fontSize: "var(--text-body-md)", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", color: "var(--foreground)",
transition: "border-color var(--duration-fast) var(--easing), box-shadow var(--duration-fast) var(--easing)" }} />
{open && (
// mousedown を止めて入力欄のフォーカスを外さない(外すと日を押す前に打ちかけの文字で確定してしまう)。
e.preventDefault()}
style={{ position: "absolute", left: 0, zIndex: 60, boxShadow: "var(--shadow-md)", borderRadius: "var(--radius-lg)",
...(up ? { bottom: "100%", marginBottom: 4 } : { top: "100%", marginTop: 4 }) }}>
{ emit(d); setOpen(false); }} />
)}