diff --git a/client/src/App.css b/client/src/App.css index d4d808d..45a996a 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -148,7 +148,8 @@ select.input-text { width: 100%; } -.time-input-24h__select { +.time-input-24h__select, +.time-input-24h__native { flex: 1 1 0; min-width: 0; padding-left: 12px; @@ -157,6 +158,11 @@ select.input-text { font-variant-numeric: tabular-nums; } +input[type='time'].time-input-24h__native { + color-scheme: inherit; + cursor: pointer; +} + .time-input-24h__sep { flex-shrink: 0; font-size: 18px; diff --git a/client/src/components/EventTimeInput24h.tsx b/client/src/components/EventTimeInput24h.tsx index 83335ee..c6ccafd 100644 --- a/client/src/components/EventTimeInput24h.tsx +++ b/client/src/components/EventTimeInput24h.tsx @@ -1,5 +1,6 @@ import { useId, useMemo } from 'react' import { joinTimeHHMM, splitTimeHHMM } from '../utils/logEntryPayload.js' +import { preferNativeCameraPicker } from '../utils/captureVideoFrame.js' const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0')) const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0')) @@ -18,7 +19,29 @@ export default function EventTimeInput24h({ 'aria-label': ariaLabel }: EventTimeInput24hProps) { const baseId = useId() + const useNativePicker = preferNativeCameraPicker() const { hours, minutes } = useMemo(() => splitTimeHHMM(value), [value]) + const timeValue = useMemo(() => joinTimeHHMM(hours, minutes), [hours, minutes]) + + if (useNativePicker) { + return ( +
+ { + const next = e.target.value + if (next) onChange(next.slice(0, 5)) + }} + disabled={disabled} + aria-label={ariaLabel} + /> +
+ ) + } return (