shadcn-datetime-picker

The library provides three distinct components depending on your UI requirements:

Keep the following constraints in mind when using DateTimeInput:

• No min/max props: The component does not reject out-of-range dates internally. To enforce date bounds, use DateTimeInput as the renderTrigger for a DateTimePicker component.
• Year Range: The valid year range is [1900, 2099]. Entering a year outside this range will prevent onChange from being called and will trigger an inline error.

Use the shadcn CLI to add the DateTimeInput component to your project. This command will install the component at components/datetime-input.tsx and automatically add necessary dependencies including date-fns, react-day-picker@^9, lucide-react, react-hook-form, and the shadcn button primitive.

npx shadcn@latest add https://shadcn-datetime-picker-pro.vercel.app/r/datetime-input.json

To add the SimpleTimePicker component to your project, use the shadcn CLI. This command will automatically install the component at components/simple-time-picker.tsx, add necessary shadcn primitives (button, popover, scroll-area), and install required dependencies (date-fns, lucide-react).

npx shadcn@latest add https://shadcn-datetime-picker-pro.vercel.app/r/simple-time-picker.json

To add the DateTimePicker component to your project, use the shadcn CLI. This command installs the component source code at components/datetime-picker.tsx and automatically adds the necessary shadcn primitives (button, popover, scroll-area) and dependencies (date-fns, react-day-picker@^9, @radix-ui/react-icons, lucide-react).

npx shadcn@latest add https://shadcn-datetime-picker-pro.vercel.app/r/datetime-picker.json

If you prefer not to use the shadcn CLI, you can install the components manually:

1. Install shadcn primitives:

   npx shadcn@latest add button popover scroll-area

2. Install npm peer dependencies:

   yarn add date-fns react-day-picker@^9 lucide-react
   # If using DateTimeInput, also add:
   yarn add react-hook-form

3. Copy the source files from the repository into your components/ folder:

   • datetime-picker.tsx
   • datetime-input.tsx
   • simple-time-picker.tsx

The SimpleTimePicker is a compact, time-only dropdown picker featuring scrollable columns for hours, minutes, and seconds. It is ideal for standalone time fields where a full calendar is not required.

Important Note on Timezones: SimpleTimePicker is local-time only. It does not support a timezone prop; the value is read and written using the browser's local timezone. If you require timezone-aware time entry, use DateTimePicker or DateTimeInput instead.

import { SimpleTimePicker } from '@/components/simple-time-picker';
import { useState } from 'react';

const [time, setTime] = useState<Date>(new Date());

<SimpleTimePicker value={time} onChange={setTime} use12HourFormat />

You can install specific components individually using the shadcn CLI to avoid unnecessary code in your project.

DateTimeInput (segmented keyboard input):

npx shadcn@latest add https://shadcn-datetime-picker-pro.vercel.app/r/datetime-input.json

SimpleTimePicker (time-only dropdown):

npx shadcn@latest add https://shadcn-datetime-picker-pro.vercel.app/r/simple-time-picker.json

The recommended way to install the full datetime picker (which includes calendar, time, and timezone support) is using the shadcn CLI. This command automatically installs required shadcn primitives (button, popover, scroll-area) and npm dependencies (date-fns, react-day-picker@^9, lucide-react), then places the source code in your components/ directory.

npx shadcn@latest add https://shadcn-datetime-picker-pro.vercel.app/r/datetime-picker.json

You can install these components using the shadcn CLI. This method automatically drops the source files into your components/ folder and installs the necessary shadcn primitives and npm peer dependencies.

Choose the specific component you need by running the corresponding command:

# Install DateTimePicker (full date + time popover)
npx shadcn@latest add https://shadcn-datetime-picker-pro.vercel.app/r/datetime-picker.json

# Install DateTimeInput (segmented keyboard input)
npx shadcn@latest add https://shadcn-datetime-picker-pro.vercel.app/r/datetime-input.json

# Install SimpleTimePicker (time-only dropdown)
npx shadcn@latest add https://shadcn-datetime-picker-pro.vercel.app/r/simple-time-picker.json

When using DateTimeInput with react-hook-form, you must bind value and onChange explicitly. Do not spread {...field} onto the component, as DateTimeInput does not currently support onBlur or name props.

const form = useForm({ defaultValues: { startsAt: new Date() } });

<FormField
  control={form.control}
  name="startsAt"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Starts at</FormLabel>
      <FormControl>
        <DateTimeInput value={field.value} onChange={field.onChange} hideError />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>