52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
// A deliberately unambiguous 24-hour time picker. Native <input type="time">
|
|
// displays 12-hour AM/PM or 24-hour format depending on the *browser's own
|
|
// locale settings* — completely outside this app's control — which makes
|
|
// "12:00 PM" (noon) easy to misread as "end of day" on a 12-hour-locale
|
|
// browser. Two plain <select> dropdowns sidestep that entirely: every
|
|
// visitor sees the same unambiguous HH:MM regardless of their locale.
|
|
|
|
const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
|
|
const MINUTES = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];
|
|
|
|
export default function TimeInput24({
|
|
value,
|
|
onChange,
|
|
}: {
|
|
value: string; // "HH:MM", 24-hour
|
|
onChange: (value: string) => void;
|
|
}) {
|
|
const [hh, mm] = value.split(':');
|
|
|
|
return (
|
|
<div className="flex items-center gap-1 bg-base border border-base-border rounded px-1.5 py-1">
|
|
<select
|
|
value={hh}
|
|
onChange={(e) => onChange(`${e.target.value}:${mm}`)}
|
|
className="bg-transparent text-ink text-sm font-mono focus:outline-none"
|
|
aria-label="Hour (24-hour)"
|
|
>
|
|
{HOURS.map((h) => (
|
|
<option key={h} value={h} className="bg-base">
|
|
{h}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<span className="text-ink-faint">:</span>
|
|
<select
|
|
value={mm}
|
|
onChange={(e) => onChange(`${hh}:${e.target.value}`)}
|
|
className="bg-transparent text-ink text-sm font-mono focus:outline-none"
|
|
aria-label="Minute"
|
|
>
|
|
{MINUTES.map((m) => (
|
|
<option key={m} value={m} className="bg-base">
|
|
{m}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
}
|