What's New

Opt-in hooks for embedding the picker in your own dialog, linking or splitting a time range, disabling times with a function, and removing event handlers

What's new:

• ui.inline.embedded - Renders the inline picker for use inside your own dialog, popover or form. It never takes or traps focus
• range.linked and range methods - range.linked: false makes From and To independent. setRange(), getRange() and setActivePart() control the range from code
• clock.isTimeDisabled - Disable times with a function, and call refreshDisabledTime() when its data changes
• on() and once() return a remover - Call the returned function to remove the handler

Optional seconds, clearer option names, keyboard control of the clock face, a callback for every event, Material Design 3 press feedback, and keyboard, screen-reader and theme fixes

What's new:

• Optional seconds - Set clock.showSeconds: true for HH:MM:SS in every mode, with its own step, disabled seconds and select:second event
• Renamed options - Clearer names such as ui.initialView for ui.mobile and labels.hour for hourLabel, mobileHour and announceHour, plus setOptions() in place of update(). The old names keep working until 5.0, and the options page lists every pair
• Keyboard control of the clock face - Arrow keys, PageUp / PageDown and Home / End change the value, and Enter or Space moves to the next face
• A callback for every event - callbacks.onShow, onSwitchView, onWheelScrollStart and onWheelScrollEnd. Callbacks passed later through update() now take effect
• Material Design 3 press feedback - A ripple plus hover, focus and pressed state layers, and one 3px focus ring on every control
• Keyboard and screen readers - Arrow keys skip disabled times, a range can be completed with the keyboard alone, and errors are announced inside the dialog
• Compact-wheel popover - A parent's overflow: hidden or z-index no longer clips the popover, and it fits its columns and the viewport
• setValue() converts formats - '14:30' in a 12h picker sets 02:30 PM. A string that is not a time now emits error
• Faster open and close - The fade starts on the click, with no wait before it. behavior.delayHandler now defaults to 0
• No page shift on open - Opening a modal picker no longer moves the page sideways, and --tp-scrollbar-gap helps keep fixed headers in place
• Safer labels - Label text is HTML-escaped, so it cannot inject markup
• Check before upgrading - Some defaults, classes and tokens changed: for example, the old .tp-ui-ripple classes are removed. The changelog lists them all, and the items deprecated for removal in 5.0. Set behavior.returnFocus: true to return focus to the input on close. 5.0 does this by default

June 10, 2026 - Two new Blueprint themes, localizable accessibility labels, and extended keyboard navigation

What's new:

• New blueprint theme - A light precision-instrument look with a vivid cobalt-blue accent, white surfaces, hairline borders and subtle shadows. Enable via ui.theme: 'blueprint'
• New blueprint-dark theme - The dark sibling with a brighter cobalt accent on near-black neutral surfaces and hairline borders, distinct from the existing purple Material dark theme
• 12 built-in themes - Blueprint brings the bundled theme count from 10 to 12, all still tree-shakeable via separate theme-*.css files
• 16 localizable accessibility labels - New optional labels.* options (e.g. hourLabel, minuteLabel, announceHour, invalidTimeFormat) let you translate all screen-reader and ARIA text that was previously hardcoded in English
• Home / End / Page keyboard navigation - Home, End, PageUp and PageDown now work on the hour and minute spinbuttons (clock mode) and on the wheel columns, alongside the existing Arrow keys

Browse all themes

March 26, 2026 - Tree-shakeable plugin system, smaller core bundle

What's new:

• Tree-shakeable plugins - Unused plugins (wheel, range, timezone) are completely excluded from the final bundle when not imported
• Plugin templateProvider hook - Plugins register their own templates, eliminating static imports from core
• Plugin clearHandler hook - Plugins provide custom clear logic, decoupling core from plugin implementations
• New exported types - TemplateProvider and ClearHandler for plugin authors

March 18, 2026 - Wheel mode, clear button, and more

What's new:

• Wheel mode - Scroll-spinner interface replacing the analog clock face. Enable via ui.mode: 'wheel'
• Compact-wheel mode - Headerless wheel picker with optional popover placement ('auto', 'top', 'bottom')
• Hide disabled options - Set wheel.hideDisabled: true to completely remove disabled values instead of dimming them
• Auto-commit on scroll - Set wheel.commitOnScroll: true to auto-confirm time at scroll end without pressing OK
• Clear button - Reset time selection with a dedicated button, enabled by default via ui.clearButton
• clearBehavior options - Control whether clearing empties the input value with clearBehavior.clearInput
• onClear callback & event - New callback and EventEmitter event with previousValue payload
• New exported types - ClearEventData, ClearBehaviorOptions, WheelScrollStartEventData, WheelScrollEndEventData
• Persist on outside click - Set wheel.ignoreOutsideClick: true to keep the picker open when clicking outside its area (wheel and compact-wheel modes)
• Race condition fix - Rapidly clicking the input before the modal fully opened no longer causes the picker to get stuck invisible in the DOM or permanently blocks the input
• Range landscape fix - From/To tabs now properly positioned in landscape orientation
• Timezone landscape fix - Timezone picker layout corrected in landscape orientation with CSS Grid
• AM/PM border theming - Landscape border color now uses theme variable instead of hardcoded black

View full changelog

January 31, 2026 - New features and UX improvements

What's new:

• Range Plugin - New! Select time ranges with start/end pickers, duration calculation, and validation
• Timezone Plugin - New! Timezone selector with searchable dropdown and UTC offset display
• Plugin architecture - Tree-shakeable plugins for smaller core bundle size
• Smooth hour snapping - Fluid hour dragging with animation (new default)

View full changelog

v4.0.0 introduces breaking changes in the options structure. See the migration guide below.

Old: clockType: '12h'

New: clock: { type: '12h' }

Check out the full documentation to explore all new features and options.