Hey everyone,
One thing that always bothered me in Bubble was how limited some native inputs are.
For a long time I worked around those limitations using custom code, multiple plugins, or custom components, but that usually resulted in inconsistent behavior, complicated workflows, and setups that were hard to maintain.
I also tested many plugins over the years, but I often ran into issues like inconsistent behavior, regressions after updates, missing functionality, poor documentation, or plugins that eventually stopped being maintained.
A while ago I shared the dropdown component I built to handle many of those edge cases, and it will continue receiving improvements over time, including a more standardized approach for properties and documentation over the next few weeks, to keep a consistent standard across the plugin library.
Now I’m following the same approach with another component that has always felt very limited in Bubble: the Date/Time Picker.
The native picker only supports single date selection, has very limited customization, no integrated time picker only, no proper multiple or range mode, and inconsistent styling and behavior across browsers.
So I started building my own solution for internal projects a while ago and after refining it through real-world usage, improving the architecture, and documenting everything properly, I decided to publish it.
The goal was simple: bring single, multiple, and range date selection together with a fully integrated time picker in one clean and reliable component, without needing multiple plugins or workaround workflows.
It integrates naturally with Bubble’s native styles, making it easier to match existing apps without excessive configuration. And also supports Bubble’s native reset action.
This component was built around many of the limitations and edge cases I encountered over the years of working with Bubble in real apps.
There may still be specific use cases or workflows you’ve faced that are not covered yet, so I’d genuinely love to hear any feedback, suggestions, and improvement ideas.
Editor
Documentation
Live Demo
Plugin Page
Key Features
Flexible Selection
Single, multiple, and range date selection in one component
Integrated time picker with hour, minute, and second columns
Configurable step intervals for hours, minutes, and seconds
Disable specific dates, weekdays, and time ranges
Set minimum and maximum dates and time limits
Maximum selection limit for multiple and range modes
Locale & Timezone
Built-in locale support for dates, month names, weekday and time labels
System or custom IANA timezone with automatic fallback
12h and 24h time formats with AM/PM tab control
Weekday labels with configurable capitalization
Fully Customizable
Over 90 properties for complete visual and behavioral control
Circle or square selection shape for calendar days and time picker options
Glassmorphism panel effect with six intensity levels
Custom placeholder, icon placement, and display formats for date and time
Fully customizable item states: available, hovered, selected, and disabled
Seamless integration with native Bubble styles while preserving a consistent appearance across browsers and matching your app design
Advanced visual customization including custom scrollbars, modern glass effects, and a built in icon library
Smooth User Experience
Configurable tooltip on hover showing all selected dates
Smooth animation types with smart directional positioning that adapts beautifully to any screen
Keyboard ready with support for Tab, Enter, Space, and Escape
Handles required and invalid states with customizable styling that integrates with Bubble styles
Workflow Friendly
Exposed states for selected values in all selection modes, validity, focus, and active locale and timezone
Required field validation with touch-aware invalid state
Reset action with flexible behavior that integrates with native Bubble actions or custom workflows
Open action that can be triggered from anywhere for full workflow control
Value changed event for seamless Bubble integration
Built with pure CSS and JavaScript for maximum performance and reliability, powered by Luxon for locale and timezone support
Some basic images below, but feel free to play around with all 90+ properties in the Live Demo and see it working in real time.
