Open-source timepicker components for Tailwind CSS
Tags: tailwindcss, flowbite, opensource, webdev
Published: 2024-03-27 16:43:19

The [timepicker component](https://flowbite.com/docs/forms/timepicker/) from Flowbite can be used to choose the hours and minutes of a given day through the usage of input fields such as the native HTML time field or even checkbox fields with predefined time interval which are popularly used for calendar event creation.

The examples on this page are all built with Tailwind CSS and some of the examples require you to install the Flowbite JavaScript dependency to make the interactive UI components functional such as the datepicker, dropdowns, modals and the drawers.

The timepicker component is often used together with a datepicker so the more advanced examples on this page show you a combination of these two components where you can select both the date (year, month and day) and then the time of the day for the event.

## Default timepicker

Use this example to show a simple input field with the native browser timepicker.

[![Tailwind CSS timepicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9yxns3mlzeyy9rakwxa.png)](https://flowbite.com/docs/forms/timepicker/#default-timepicker)

- Get the [source code from here](https://flowbite.com/docs/forms/timepicker/#default-timepicker)

## Timepicker with icon

This example can be used to select a time via an input field where you can add an icon to the input group.

[![Tailwind CSS Timepicker with icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/daqcxntpv3m61xjhiroo.png)](https://flowbite.com/docs/forms/timepicker/#timepicker-with-icon)

- Get the [source code from here](https://flowbite.com/docs/forms/timepicker/#timepicker-with-icon)

## Timepicker with dropdown

Use this example to show a timepicker together with a dropdown menu where you can add options such as selecting the timezone or the duration of an event in minutes or hours.

[![Tailwind CSS timepicker with dropdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58m0726xtwzi19oqlbzk.png)](https://flowbite.com/docs/forms/timepicker/#timepicker-with-dropdown)

- Get the [source code from here](https://flowbite.com/docs/forms/timepicker/#timepicker-with-dropdown)

## Timepicker with select

Use this example to show a select input next to the timepicker to select an option like a timezone.

[![Tailwind CSS Timepicker with select](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmk2q597ag3uqza2vlfb.png)](https://flowbite.com/docs/forms/timepicker/#timepicker-with-select)

- Get the [source code from here](https://flowbite.com/docs/forms/timepicker/#timepicker-with-select)

## Timepicker range selector

Use this example to select a time interval using two input field often used for the duration of an event.

[![Tailwind CSS timepicker with range selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0fqrgui8qubqhxeiqev.png)](https://flowbite.com/docs/forms/timepicker/#timepicker-range-selector)

- Get the [source code from here](https://flowbite.com/docs/forms/timepicker/#timepicker-range-selector)

## Timerange with dropdown

This example can be used to show the timerange picker inside a dropdown only when clicking on a button.

[![Tailwind CSS timerange](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnhx04r5cvk6bv7kzbgk.png)](https://flowbite.com/docs/forms/timepicker/#timerange-with-dropdown)

- Get the [source code from here](https://flowbite.com/docs/forms/timepicker/#timerange-with-dropdown)

## Inline timepicker buttons

This is an advanced example that you can use to show the details of an event and select a date of the event based on the [Flowbite Datepicker](https://flowbite.com/docs/plugins/datepicker/) and select the time using a predefined set of time intervals based on checkbox elements.

[![Tailwind CSS timepicker with datepicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dik2hqhqftxl8rvaekri.png)](https://flowbite.com/docs/forms/timepicker/#timerange-picker-with-toggle)

- Get the [source code from here](https://flowbite.com/docs/forms/timepicker/#timerange-picker-with-toggle)

## Modal with timepicker

Use this example to select a date and time inside of a modal component based on the [Flowbite Datepicker](https://flowbite.com/docs/plugins/datepicker/) and select a time interval using checkbox elements with predefined time values for event time scheduling.

[![Tailwind CSS modal with timepicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8amrkonn6y9qjcaco4t6.png)](https://flowbite.com/docs/forms/timepicker/#modal-with-timepicker)

- Get the [source code from here](https://flowbite.com/docs/forms/timepicker/#modal-with-timepicker)

## Drawer with timepicker

Use this example to show multiple time interval selections inside of a drawer component to schedule time based on multiple entries (ie. days of the week) using the native browser time selection input element.

[![Tailwind CSS timepicker with drawer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovd29t55xddjfntlajpd.png)](https://flowbite.com/docs/forms/timepicker/#drawer-with-timepicker)

- Get the [source code from here](https://flowbite.com/docs/forms/timepicker/#drawer-with-timepicker)

## Credits

- [Tailwind CSS](https://tailwindcss.com/)
- [Flowbite](https://flowbite.com/)
- [Flowbite Icons](https://flowbite.com/icons/)