Tyler
72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface StopsDatePickerProps {
|
|
value: Date;
|
|
}
|
|
|
|
/**
|
|
* Format a Date as the `YYYY-MM-DD` value used by `<input type="date">`.
|
|
*
|
|
* Uses local-time components (not `toISOString()`) so the picker doesn't
|
|
* snap to the day before/after for users in a non-UTC timezone — a date
|
|
* picker where selecting "today" in the user's browser unexpectedly
|
|
* changes the URL by a day is a common footgun.
|
|
*/
|
|
function toInputValue(d: Date): string {
|
|
const yyyy = d.getFullYear();
|
|
const mm = String(d.getMonth() + 1).padStart(2, "0");
|
|
const dd = String(d.getDate()).padStart(2, "0");
|
|
return `${yyyy}-${mm}-${dd}`;
|
|
}
|
|
|
|
/**
|
|
* StopsDatePicker — native `<input type="date">` for the v2 stops list.
|
|
*
|
|
* Pushing a new URL on change triggers a server re-render of the page
|
|
* with the new date. The page's `searchParams.date` is the source of
|
|
* truth; this component is purely an input control.
|
|
*
|
|
* The pill is sized at 56px to match the rest of the v2 action bar
|
|
* (matching OrdersFilterButton).
|
|
*/
|
|
export function StopsDatePicker({ value }: StopsDatePickerProps) {
|
|
const router = useRouter();
|
|
return (
|
|
<label
|
|
className="rounded-xl flex items-center gap-2"
|
|
style={{
|
|
minHeight: "56px",
|
|
padding: "0 16px",
|
|
backgroundColor: "var(--color-surface-2)",
|
|
fontWeight: 600,
|
|
letterSpacing: "0.02em",
|
|
}}
|
|
>
|
|
<span className="text-label" style={{ color: "var(--color-text-muted)" }}>
|
|
Date
|
|
</span>
|
|
<input
|
|
type="date"
|
|
value={toInputValue(value)}
|
|
onChange={(e) => {
|
|
const newDate = e.target.value;
|
|
if (!newDate) return;
|
|
router.push(`/admin/v2/stops?date=${newDate}`);
|
|
}}
|
|
style={{
|
|
background: "transparent",
|
|
border: 0,
|
|
outline: "none",
|
|
fontSize: "15px",
|
|
fontWeight: 600,
|
|
color: "var(--color-text)",
|
|
}}
|
|
/>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
export default StopsDatePicker;
|