Shadcn DateTime Picker

The DateTimePicker is an all-in-one calendar and time picker in a single popover. It is ideal for forms and scheduling.

Basic Usage

import { DateTimePicker } from "@/components/datetime-picker";

export default function MyForm() {
  const [date, setDate] = useState<Date>();

  return <DateTimePicker value={date} onChange={setDate} />;
}

Common Configurations

• 12-Hour Format: <DateTimePicker hourFormat={12} />
• Business Hours: Restrict time using minTime and maxTime (e.g., minTime="09:00", maxTime="17:00") and set timeInterval (15, 30, or 60).
• Timezone Selector: Use showTimezone to enable the dropdown. You can pre-set a timezone with timezone="America/New_York" or track changes with onTimezoneChange.
• Date Restrictions: Use minDate and maxDate to constrain selectable dates. Use disabledDates with a callback function to disable specific days (e.g., weekends).
• Week Start: Set weekStartsOn={1} to start the week on Monday (0 is Sunday).

The DateTimePickerField component is a wrapper designed for seamless integration with react-hook-form and zod. It handles labels, descriptions, and error states automatically.

Basic Usage

import {
  DateTimePickerField,
  useForm,
  zodResolver,
} from "@/components/datetime-picker-form";
import { z } from "zod";

const schema = z.object({
  appointment: z.date({ error: "Please select a date and time." }),
});

export default function MyForm() {
  const form = useForm({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={form.handleSubmit((data) => console.log(data))}>
      <DateTimePickerField
        control={form.control}
        name="appointment"
        label="Appointment"
        description="Select a date and time for your appointment."
        hourFormat={12}
        minTime="09:00"
        maxTime="17:00"
        timeInterval={30}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

API Reference

Note: All other props from DateTimePicker are supported.

The DateTimePickerRange component allows for start/end date and time selection using tab-based navigation. It is ideal for booking systems or analytics filters.

Workflow

1. Open the picker via the trigger.
2. From tab: Select the start date and time. Selecting a start date automatically switches to the To tab.
3. To tab: Select the end date and time. Dates occurring before the start date are automatically disabled.
4. Selecting the end time closes the picker.

Basic Usage

import { DateTimePickerRange, type DateTimeRange } from "@/components/datetime-picker-range";

const [range, setRange] = useState<DateTimeRange>();

<DateTimePickerRange value={range} onChange={setRange} />

API Reference

The following props are available for the DateTimePicker component:

The DateTimePicker component accepts the following props to control its behavior and appearance:

The DateTimePickerField component is a generic wrapper designed to integrate the DateTimePicker component directly into a react-hook-form workflow. It handles the connection between the form state and the picker, including value updates, error display, and field descriptions.

To use it, you must provide a control object from useForm and a name that matches a key in your form's data schema. It accepts all standard DateTimePickerProps (excluding those handled by the controller) such as disabled or other picker-specific configurations.

import {
  useForm,
  zodResolver
} from "./src/components/datetime-picker-form";
import { DateTimePickerField } from "./src/components/datetime-picker-form";
import { z } from "zod";

const formSchema = z.object({
  appointmentDate: z.date(),
});

export function MyForm() {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      appointmentDate: undefined,
    },
  });

  return (
    <form onSubmit={form.handleSubmit(console.log)}>
      <DateTimePickerField
        control={form.control}
        name="appointmentDate"
        label="Select Date"
        description="Please choose a time for your appointment."
      />
      <button type="submit">Submit</button>
    </form>
  );
}