A modern package delivering flexible and sleek date/time pickers built specifically for daisyUI. Leveraging Day.js, these components offer a smooth and integrated experience for handling dates and times in your React projects.

Key Benefits

• DaisyUI Themes Compatibility: Provides perfect integration with all daisyUI themes.
• Language Support built in: Access over 100 locales (with 16 enabled by default) for i18n.
• Day.js Integration: Uses Day.js for powerful date manipulation.
• AM/PM Support: Simplifies time selection with effective AM/PM toggling.
• Date manipulation: Ideal for start/end date pickers with support for minimum selectable dates.
• Opionated: No range pickers. delivering simplicity and clarity in user interaction.

Installation

1pnpm install react-daisyui-timetools
2bun install react-daisyui-timetools

Components

DatePicker

1import { DatePicker } from "react-daisyui-timetools"

A stylish, easy-to-use date picker.

Usage

1<div data-theme="light" className="rounded-2xl w-48" style={{ width: "390px" }}>
2  <DatePicker value="2025-01-01 12:00" onChange={() => {}} />
3</div>

Examples

Light Theme

1<div data-theme="light" className="rounded-2xl w-48" style={{ width: "390px" }}>
2  <DatePicker value="2025-01-01 12:00" onChange={() => {}} />
3</div>

Dark Theme with Custom Icon

1<div data-theme="dark" className="rounded-2xl w-48" style={{ width: "390px" }}>
2  <DatePicker value="2025-01-01 12:00" locale="fr" onChange={() => {}} calendarIcon={<div>📅</div>} />
3</div>

TimePicker

A precise time selection tool.

Usage

1<TimePicker value="2024-01-01 12:00" onChange={() => {}} interval="60" />

Examples

60 Minutes Interval

1<div data-theme="light" className="rounded-2xl w-32">
2  <TimePicker value={new Date()} onChange={() => {}} interval="60" />
3</div>

AM/PM Format

1<div data-theme="light" className="rounded-2xl w-32">
2  <TimePicker value="2024-01-01 12:00" AMPM onChange={() => {}} />
3</div>

DateAndTimePicker

Combines both date and time picking in one seamless component.

Usage

1<DateAndTimePicker
2  value="2025-01-01 12:00"
3  onChange={() => {}}
4  locale="en"
5  weekStart="sunday"
6/>