LIVE DEMO Preview: https://apple-date-picker.bubbleapps.io/version-test
Editor:  https://bubble.io/page?id=apple-date-picker&test_plugin=1789050549408x885664422971048000_current&tab=Design&name=index&elements=bTGYf

SETUP

Step 1 — Install the plugin
Go to Plugins > Add plugins, find "Wheel Date Picker" and install it.
No API keys or account setup are required.

Step 2 — Add the element to a page
In the editor, open the elements palette, pick "AppleDatePicker" and draw
it on your page.

Step 3 — Set the height
The element height must equal: Visible rows x Item height.
With the default values (7 rows x 44px) set the height to 308px.
If it doesn't match, rows are clipped at the top and bottom.
Width is up to you — the three columns split it between them, with the
month column slightly wider to fit longer names.

Step 4 — Set the starting date
 Initial year    e.g. 1996
 Initial month   1-12
 Initial day     1-31 (adjusted automatically if the month is shorter)
These are only used on load; after that the picker keeps whatever the
user selected.

Step 5 — Set the year range
 Years before current   how many years back the year column goes
 Years after current    how many years forward
Example: for a birthdate picker, set years before to 120 and years after
to 0, so nobody can scroll into the future.

Step 6 — Choose the format
 Month format   short ("Jan"), long ("January") or numeric ("01")
 Day before month   off gives Month · Day · Year (US style),
                     on gives Day · Month · Year (most of the world)

Step 7 — Adjust the look
The background is transparent by default, so the picker sits on whatever
is behind it. Set "Bg color" only if you want a solid fill.
On a light background, change "Text color" to a dark value — the default
is white.
Optional: "Font size", "Radius", "Visible rows" (must be odd — one row
sits in the centre).

Step 8 — Read the selected date
The element publishes four states, updated as the user scrolls:
 year      number
 month     number, 1-12
 day       number
 value     text, e.g. "2026-07-15"
 display   text, formatted for reading, e.g. "July 15, 2026"
Reference them like: AppleDatePicker A's value

Step 9 — Run a workflow on change
Add a workflow: When AppleDatePicker A's value changed.
The event fires once scrolling stops, not on every frame.
Example: Make changes to a thing > birthdate = AppleDatePicker A's value

Step 10 — Set the date from a workflow
Use Element Actions > Set date.
Pass Year, Month (1-12) and Day.
If the day doesn't exist in that month (e.g. day 31 in April), the picker
snaps to the nearest valid day.

NOTES
Works with touch, mouse wheel, click and arrow keys.
Month names use the browser's own locale formatting, so they display
correctly for the visitor's language without any extra setup on your end.
To save into a Bubble date field, build the date from the year/month/day
states rather than parsing the text value — it's less error-prone across
timezones.

TROUBLESHOOTING

The picker shows the wrong number of days for a month
 This should self-correct as soon as you scroll — the day column
 recalculates on every month/year change. If it doesn't, check that
 "Support standard visible property" is enabled in the plugin's General
 settings; without it, the element's update code doesn't run.

Month names are in the wrong language
 They follow the visitor's browser locale by default. If you need a
 fixed language regardless of the visitor, that's not currently
 configurable — let us know if you need it.

The "value changed" workflow doesn't fire
 Open the browser console — the plugin logs a warning naming the event
 it tried to trigger. Compare that name to the one shown when you expand
 the event's Name field on the Events tab.