Introduction
Today I tackled a small but annoying problem: time pickers that make you click way too much.
If you’ve ever used the default time pickers in popular UI libraries like Material-UI (MUI) or shadcn/ui, you probably know what I mean. They’re not terrible—but they’re definitely not fast.
You have to:
- Select the hour.
- Select the minutes.
- Select AM or PM.
- Sometimes even seconds.
All of those steps are separate—and it’s just too many clicks (or too much typing) for something that should be quick and intuitive.
Why I Built This
There’s one time picker I actually love: the one in Google Calendar.
In Google Calendar, you just start typing “9:30” or “2pm,” and it immediately suggests times. No extra clicks, no separate dropdowns. It feels natural.
Since I couldn’t find an equivalent in MUI or shadcn/ui, I decided to build one myself.
What It Does
This time picker:
✅ Lets you type any time (e.g., “9:30”, “14:15”, “2pm”)
✅ Instantly shows matching options in a dropdown
✅ Works seamlessly with MUI and shadcn/ui
✅ Requires zero configuration—just copy the component and use it
How I Built It
I started by prototyping the component with Lovable. Honestly, Lovable did a pretty great job generating most of the initial code. I refined the code a little bit and added a bunch of tests to ensure reliability.
Usage
You don’t need to install any packages—just grab the code:
GitHub Repo:
👉 https://github.com/kcsujeet/autocomplete-timepicker
Available components:
-
MuiAutocomleteTimePicker.tsx(Material-UI) -
ShadcnAutocomleteTimePicker.tsx(shadcn/ui)
Live Demo
You can try it out here:
🔗 Live Demo
Final Thoughts
This was a small side quest that made a big difference in user experience for me. If you also find default time pickers frustrating, give this a try in your project.
I’d love to hear any feedback or suggestions!
Happy building—and fewer clicks! 🚀
Top comments (0)