Date Picker
Mantine DateTimePicker for /query evaluation time, flanked by previous/next ActionIcons for fast stepping.
DO
Expose previous/next Icon Buttons for temporal fields — scrubbing is more common than arbitrary date entry.
DON'T
Bury the time picker behind a second click on /query — evaluation time is the primary control.
Design
default
2026-04-24 15:06
Field with calendar popover + time picker; arrow icons on either side.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<DateTimePicker label="Evaluation time" value={ts} onChange={setTs} />Layout
| Property | Value |
|---|---|
| height | 36px control-height |
| border-radius | 4px sm |
Accessibility
| Keyboard | Arrow keys move the focused date; Enter commits. |