Time Picker

Preview

2:53 AM

Installation

pnpm add react-datepicker date-fns
npx skeci-ui add time-picker

Usage

import { TimePicker } from '@/components/ui/time-picker';
import { useState } from 'react';

const [date, setDate] = useState<Date | null>(new Date());

<TimePicker selected={date} onChange={(date) => setDate(date)} />

Variants

Inline Time Picker

Custom Time Intervals (30 mins)

2:53 AM

Props

Prop	Type	Default	Description
`selected`	`Date \| null`	—	The selected time.
`onChange`	`(date: Date \| null) => void`	—	Callback when the time changes.
`disabled`	`boolean`	`false`	Whether the time picker is disabled.
`placeholderText`	`string`	`'Pick a time'`	Placeholder text for the input.
`border`	`'rough' \| 'normal'`	`'rough'`	The border style of the input.
`inline`	`boolean`	`false`	Whether to render the time picker inline.
`timeIntervals`	`number`	`15`	The interval between time options in minutes.