Wheel Date Picker

• index.html: the demo page and the markup to copy

• assets/style.css: component styles, plain CSS custom properties for colours

• assets/script.js: readable, commented source with an onReady guard

• Three columns as 3D cylinders: each row is rotated on the X axis with perspective and fades as it turns away from the centre

• Drag, flick, mouse wheel and trackpad; a flick coasts at the speed it was thrown and lands on a whole value

• Day and month loop with no seam; the year rubber-bands at the ends of its range

• Days a month lacks are faded and skipped: landing on the 31st and then choosing February rolls the day drum back to the 28th, or the 29th in a leap year

• Column order, month names and labels from Intl.DateTimeFormat: day-month-year, month-day-year or year-month-day

• data-min and data-max (or today) fade and skip everything outside them; the drum rolls back from a date it lands on out of range

• A date and time mode: one drum of days ("Today", "Tue 10 Nov", ...) beside hour, minute and, where the locale uses one, AM/PM

• The readout rolls only the characters that changed, in the direction their wheel turned

• A native <input type="date"> (or datetime-local) carries the value into your form and is the whole picker when JavaScript is off

• Roles: group around the columns, spinbutton per column, status for announcements

1. Add to your <head>:

In your downloadThe working code for this step, in index.html.

The one-line has-js script hides the native fallback field before the first paint, so the page never shows it for a frame. The component script adds the class too, so it is optional if you can live with that frame.

2. Add before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

3. Copy the component markup from index.html into your page:

In your downloadThe working code for this step, in index.html.

The script looks for every [data-wheel-date] on the page and builds the columns inside its [data-wdp-wheels]. Only that container is required. The readout, the native input, the status line and the two buttons are each optional: leave one out and the picker simply does without it. The .wdp-* classes are styling only; the script reads the data- hooks.

The toolbar strip and the grey ground in index.html are demo furniture, not part of the component; leave them behind. The demo's mode switch also swaps the card's label and limits between a date of birth and a scheduled send, which is demo wiring too.

Every option except data-value is watched: set any of them at any time and the columns rebuild around the current value, pulled inside the new limits. Set data-value in the same tick as one of them to rebuild around a new value instead.

The picker uses one locale for everything it prints: the order of the columns, the month names, the day and year labels (14日 and 1992年 in Japanese, 14. in German), the date column in datetime mode, the readout, the AM/PM labels and whether the clock is 12 or 24 hour. It is chosen in this order:

1. data-locale on the picker
2. the page's lang (the nearest [lang] ancestor) when it names a region, such as en-GB
3. the browser's language when it is the same language as the page (an lang="en" page read in an en-GB browser gets day-month-year)
4. the page's lang, then en-US

The spinbuttons' accessible names ("Day", "Month", "Year") come from the same locale through Intl.DisplayNames, so they match the language the values are spoken in. The value the picker emits is always ISO, whatever the locale.

• The calendar. The day column always shows 1 to 31; days the current month lacks are faded and cannot be chosen. Land on one, by flick, wheel or month change, and the day drum rolls back to the last day of the month. Arrow keys step over them (the 28th of February steps up to the 1st in a non-leap year).
• data-min and data-max. In date mode the year column runs from the min year to the max year and stops there with a rubber-band give. Inside the boundary years, the months and days outside the range fade the same way and roll back the same way. Without them the years run from 100 years ago to 20 ahead (YEARS_BACK, YEARS_AHEAD in the script).
• today resolves when the picker builds, in the visitor's time zone. data-max="today" is the date-of-birth case.
• Datetime mode. The date column runs from data-min to data-max, or a year back and two ahead without them (DAYS_BACK, DAYS_AHEAD). A time on either limit (data-min="2026-11-09T14:30") also fades the hours and minutes outside it on that day, and the time rolls forward to the limit if it lands before it.
• The native input gets matching min and max attributes from the script. Write a literal min and max in the markup too if the no-JavaScript field should be limited; today cannot be written there, so the server should check it.

Each column is in the tab order and behaves as a spinbutton:

• Roles: the columns sit in a role="group" labelled by the field label; each column is role="spinbutton" with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext ("14", "March", "1992"; "Today, Monday, 9 November 2026" on the datetime date column). The rows themselves are aria-hidden.
• Announcements: keyboard changes are spoken through the spinbutton's own value text. Pointer and wheel changes are announced once, through the role="status" line, after the wheels settle ("14 March 1992"), so a long flick is not read out row by row.
• Faded values are decoration, painted by CSS from a data-mark attribute, not text: they cannot be chosen, so they are not offered to assistive technology, and their low contrast is not read as low-contrast copy. The same applies to the rows more than one step from the centre.
• The visible readout is aria-hidden once the script runs, because the spinbuttons already carry the value.
• Pointer: touch-action: none on the columns, so a vertical drag turns the wheel and never scrolls the page. Wheel and trackpad events over a column are prevented and stopped there, which also keeps Lenis or any other smooth scroller on window still. No data-lenis-prevent is needed.
• prefers-reduced-motion: reduce: the drums become a flat list, a release snaps straight to the nearest value with no coasting, the wheel steps one row per gesture, a ruled-out day jumps back rather than rolling, and the readout swaps characters without rolling. Every input still works. Changing the preference while the page is open rebuilds the picker and keeps the date.
• No JavaScript: the native date input is shown instead of the wheels and submits the same ISO value.

Two themes on one set of custom properties, chosen by data-variant:

In your downloadThe working code for this step, in index.html.

The attribute also works on the component root (<div class="wdp" data-variant="dark" ...>) if your page sets its own theme elsewhere. The demo's toggle and the ?variant=dark URL parameter only set that attribute; nothing in the script reads it.

The tokens, set in both body[data-variant="light"] and body[data-variant="dark"] in assets/style.css:

To fit your brand, re-value --accent and, if your surfaces differ, --raised, --band and --ink-off in both blocks. Keep text colours solid (no rgba on --ink-*), so contrast stays measurable. --ground and --ground-2 only colour the demo page.

The drum. Each column keeps one number, how many rows it has turned. Eleven recycled row elements are placed around it every frame, each with rotateX by its distance from the centre and translateZ out to the cylinder's radius, and the drum sits back by that radius so the centre row renders at its true size. The radius is derived from --wdp-item, so the rows always meet edge to edge. Looping columns read their label with a modulo, so there is no duplicated list and no seam; labels are formatted on demand and cached, so a long year or date range costs nothing until it is turned to. GSAP tweens only that number; it never owns a row's transform, so no CSS transform can fight it.

Flick and settle. During a drag the last 100ms of pointer movement is kept. On release it becomes a speed in rows per second; the column projects where it would coast, rounds to a whole row and gsap.tos there with power3.out, whose duration is chosen so its starting speed matches the throw. A finger held still before letting go has no speed and just settles. Wheel input eases towards an accumulating target and snaps to a row 120ms after the last event.

Limits. When a column comes to rest, the picker reads every column and clamps the result: year into range, then month into the range for that year, then day into the range for that month (the month's length and any min or max). Every column that is not still moving and shows something other than the clamped value rolls to it the short way round. While a year or month column turns, the columns that depend on it re-render as soon as its centre row changes, so the 30th and 31st fade the moment February passes the band.

The readout. The value is formatted with the locale's formatToParts, and each part gets a slot: one per digit for numbers, one for a word. When the value changes, only the slots whose text changed roll; the new glyph enters from the side the value moved towards and the old one leaves the other way. A part that changes width (9 to 10, March to May) rolls as one piece and splits back into digits when it lands.

Teardown. Everything runs inside gsap.matchMedia(). Reverting it (or a motion-preference change) removes every listener, kills the tweens and empties the wheels, leaving the readout as plain text and the native input holding the last value.

• Row height: --wdp-item on .wdp (36px). The cylinder radius follows it.
• Visible height: --wdp-rows on .wdp (5.5 rows).
• Column widths: the flex-grow rules on .wdp-col[data-wdp-col="..."] in assets/style.css (month widest, day narrowest).
• Curvature: ITEM_ANGLE at the top of assets/script.js (20 degrees between rows). Smaller is a flatter, larger drum.
• Throw: FLING_TIME (how far a release coasts) and MAX_FLING_ROWS (the cap on one flick).
• Wheel sensitivity: WHEEL_ROWS_PER_PX (about one row per 100px mouse notch).
• Default ranges: YEARS_BACK, YEARS_AHEAD, DAYS_BACK, DAYS_AHEAD.
• Large steps for PageUp/PageDown: largeStep() in assets/script.js.
• Colours live in assets/style.css as custom properties per theme.

• GSAP 3.12+ (core only, no plugins)
• Intl.DateTimeFormat with formatToParts, in every current browser; Intl.DisplayNames and Intl.RelativeTimeFormat are used when present, with English fallbacks
• No build step, no framework