Google Calendar Style Time Picker

Don't like the default time pickers that come with MUI and shadcn/ui? Neither do I.

This is a Google Calendar-style time picker with autocomplete - much better than the default ones.

Why This Exists

The default time pickers from Material-UI and shadcn/ui are not great. Google Calendar's time picker is way better - you can type to search and quickly select times. So I built these components.

Usage

Just copy the code from the components and use them in your project:

• MuiAutocompleteTimePicker.tsx - Material-UI version
• ShadcnAutocomleteTimePicker.tsx - shadcn/ui version

Demo

Live Demo: https://autocomplete-timepicker.lovable.app/

Or run locally:

bun install
bun run dev

About

Initially created using Lovable, then modified the code a bit to make it even better. Also added comprehensive tests for both components to ensure they work reliably.

That's it. Copy the code you need and use it.