Time Picker — Free HTML CSS JS Dropdown Snippet

The native HTML <input type="time"> is one of the most inconsistently implemented form controls across browsers. On desktop Chrome it renders as a compact spinner with up/down arrows that are hard to click precisely; on iOS Safari it hijacks the full screen with a drum-roll picker that cannot be styled; on Firefox it presents a plain text field where users must type time manually; on Samsung Internet it opens yet another entirely different UI. None of these native controls can be styled to match your design system, none expose clean events that fire only when selection is complete, and none support features like a "Now" shortcut or automatic 5-minute rounding. Every time you reach for <input type="time"> in a production form, you are accepting unpredictable UI across your user base. This custom time picker replaces the native control entirely: a styled trigger button that shows the selected time, a panel with two scrollable columns for hours and minutes, a segmented AM/PM toggle, a Now shortcut, an OK button, a Clear button, and a 24-hour format helper — all in plain HTML, CSS, and vanilla JavaScript with zero dependencies and zero npm packages.

Data model: HOURS and MINUTES arrays

The picker is driven by two simple arrays at the top of the script: HOURS = [1,2,3,4,5,6,7,8,9,10,11,12] and MINUTES = [0,5,10,15,20,25,30,35,40,45,50,55]. This array-based model is the key architectural decision. It means the step size, the range, and the number of items are all controlled by editing one line — swap MINUTES to [0,15,30,45] for quarterly steps or Array.from({length:60},(_,i)=>i) for every-minute granularity without touching any rendering code. State is tracked in three variables: selectedHour (null or 1-12), selectedMinute (null or 0-55), and ampm (string "AM" or "PM"). Null values mean "nothing selected yet" and cause the trigger to show its placeholder text.

How the scroll columns work

The render() function is the single source of truth for both columns. It clears each container with innerHTML = '', then maps over HOURS and MINUTES using document.createElement to build each div.time-item. The selected item gets the .selected class which applies the indigo background and white text. Each item gets a click listener that calls selectHour(h) or selectMinute(m). After rebuilding, scrollIntoView({ block: 'nearest' }) is called on the selected element so it scrolls into view without snapping the whole page. The 5-minute increment grid for minutes is a deliberate UX choice — Google Calendar, Apple Calendar, and Outlook all default to 15 or 30-minute grids; 5-minute steps give more precision while still keeping the list at 12 items instead of 60.

AM/PM toggle design and state

The AM/PM selector uses two <button> elements inside a flex column container with overflow: hidden and a shared border — a classic segmented-control pattern that renders as a single compound widget. The active button gets the .active class (indigo background, white text); the inactive button stays transparent. setAmPm(val) updates the ampm state variable, toggles the class on both buttons, and calls updateDisplay() to refresh the trigger label and the 24h helper text simultaneously. Because AM/PM is independent of hour and minute selection, changing it never triggers a full render() — only a display update — keeping the interaction snappy.

The Now button and time rounding

setNow() reads new Date() to get the current local time. The raw minute from now.getMinutes() is rounded to the nearest 5-minute mark with Math.round(m / 5) * 5 % 60 — so 2:47 PM becomes 2:45 PM and 2:48 PM becomes 2:50 PM. The 24h hour is converted to 12h format with h % 12 || 12, which correctly maps hour 0 (midnight) to 12, hour 13 to 1, and so on. AM/PM is determined by h >= 12 before the modulo conversion. After setting all three state variables, render() and updateDisplay() are called to rebuild the columns and show the time in the trigger.

24h getValue() output for APIs and forms

The getValue() function converts the 12h picker state back to a 24-hour "HH:MM" string for use in APIs, forms, and backend date libraries. It starts with selectedHour % 12 which yields 0 for the 12 o'clock position (both 12 AM and 12 PM), then adds 12 if ampm === 'PM', producing the correct 24h hour in all edge cases. Both the hour and minute are zero-padded with padStart(2,'0') to guarantee the "HH:MM" format that <input type="hidden"> fields, ISO 8601 timestamps, REST APIs, and backend time parsers expect. The 24h string also appears in the helper text below the trigger (prefixed with "24h:") so users can verify the value without opening the picker again.

Opening animation and robust click-outside close

The dropdown panel uses opacity: 0 and transform: translateY(-6px) in its closed state. Adding the .open class transitions to opacity: 1 and translateY(0), creating a smooth downward reveal that takes 180ms — fast enough to feel instant but slow enough to feel polished. The transition is driven entirely by CSS so there is no JavaScript requestAnimationFrame loop and no layout thrashing. The click-outside close uses e.composedPath().includes(wrap) rather than e.target.closest(). This is important because the scroll column's render() rebuilds the DOM on every selection — if a clicked item is removed from the DOM before the event bubbles to document, e.target.closest() returns null and the picker closes unexpectedly. composedPath() captures the original event path at dispatch time, before any DOM mutation, so outside-click detection is reliable even after re-renders.