- Components24
- Autocomplete
- Location Input
- Signature Input
- Signature Pad
- Credit Card
- Masked Input
- Color Picker
- Tag / Token Input
- Emoji Picker
- Transfer List
- Tree Select
- Image Upload / Dropzone
- Cron Expression Builder
- Inline Editable Field
- Sortable List Input
- Schedule / Availability Picker
- Phone Input
- Datetime Picker
- Smart Datetime Input
- File Upload
- Tags Input
- Multi Select
- Password Input
- Rating
Datetime Picker
Segmented date and time input with keyboard stepping, powered by timescape.
Datetime Picker
Segmented date and time input with keyboard stepping, powered by timescape.
Preview
//|:
Features
- Arrow keys step each segment; typing jumps to the next one.
- Configurable segment order and 12/24-hour clocks.
Installation
npx shadcn@latest add https://www.shadcn-form.com/r/datetime-picker.json
The CLI installs every dependency listed in the registry item.
Usage
import { DatetimePicker } from '@/components/ui/datetime-picker'const [date, setDate] = React.useState<Date | undefined>(new Date())<DatetimePickervalue={date}onChange={setDate}format={[['months', 'days', 'years'],['hours', 'minutes', 'am/pm'],]}/>