# Date Time Input

> The DateTimeInput component provides a simple and intuitive way to select both a date and a time within a single interface. Built entirely with shadcn/ui primitives, it combines a popover calendar for picking dates with a sleek time input field, ensuring consistency and accessibility across applications. Its minimal yet functional design makes it easy to integrate into forms, booking systems, scheduling tools, or any feature that requires precise date and time selection. With a live preview of the chosen values, DateTimeInput enhances usability while maintaining a clean, modern UI.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: date-fns, lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/date-time-input

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/date-time-input?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt