TimePicker

The TimePicker component is a versatile, responsive UI element designed for effortless time selection. It provides an intuitive interface with support for:

• Date Range Control: Limit user selection via minDate and maxDate.
• Localization: Format dates to various locales using the locale prop.
• Custom Navigation: Easily customize navigation controls using forwardIcon and backwardIcon.
• Time Integration: Optionally incorporate time selection through the timeModule.

Built with accessibility in mind, and leveraging DasiyUI and Tailwind CSS, this component ensures a modern, mobile-first experience across all devices.

Usage

import TimePicker from "react-daisyui-timetools"
<TimePicker value="2024-01-01 12:00" onChange={() => {}} interval="60" />

Light (default) 60 minutes interval

60 minutes interval

12:00

30 minutes interval

12:00

15 minutes interval

12:00

AMPM

Inline AMPM

12:00AM

Outside AMPM

12:00

Props

Prop	Type	Description
value	string | null | Date	The current selected date/time value. Can be a string, null, or Date object.
open	boolean (optional)	Controls whether the calendar popup is explicitly open (true) or closed (false).
onChange	(value: string) => void	Callback invoked when the date/time value changes, passing a full date as a string (not just time).
AMPM	boolean (optional)	Enables AM/PM time format.
maxDate	Date | string | null (optional)	The maximum selectable date. Limits selection to dates on or before this value.
minDate	Date | string | null (optional)	The minimum selectable date. Limits selection to dates on or after this value.
closeOnHour	boolean (optional)	Determines if the picker should close after selecting an hour.
closeOnMinute	boolean (optional)	Determines if the picker should close after selecting a minute.
placeholder	string (optional)	Placeholder text in the input field when no date is selected.
hideInput	boolean (optional)	Hides the input field if set to true.
size	"xs" | "sm" | "md" | "lg" (optional)	Controls the size variation of the DatePicker UI.
interval	"60" | "15" | "30" (optional)	Sets the interval for time selection in minutes.
className	string (optional)	Additional CSS classes for the outer container of the DatePicker.
inputClassName	string (optional)	Additional CSS classes for styling the input element itself.
calendarClassName	string (optional)	Additional CSS classes for styling the calendar popup component.
externalAMPM	boolean (optional)	Displays AM/PM selection outside the main picker interface.