DateTimePicker

Let users choose a date and time.

On this page

Installation

Use this component from the local workspace package. Follow the setup guide first. A public npm package and registry are not available yet.

View registry files

Usage

Import the component into your page or component file.

Usage

import {
  DateTimePicker,
  type DateTimePickerValue,
} from "@dethink/components";
import { CalendarDateTime, parseZonedDateTime } from "@internationalized/date";

Examples

Try the examples, then open the code to use them in your app. Tab through the segments or open the popover for the calendar, presets, and time selector.

Basic

Open the calendar to choose a date and time together, or use the clock button to jump straight to time.

Kickoff meeting

140720260930

Choose a date, set a time, then select Done.

Show sourceexamples/date-time-picker/basic.tsx

examples/date-time-picker/basic.tsx

"use client";

import { DateTimePicker } from "@dethink/components";
import { CalendarDateTime } from "@internationalized/date";

export function DateTimePickerBasic() {
  return (
    <div className="mx-auto max-w-sm">
      <DateTimePicker
        label="Kickoff meeting"
        description="Choose a date, set a time, then select Done."
        name="kickoffAt"
        defaultValue={new CalendarDateTime(2026, 7, 14, 9, 30)}
      />
    </div>
  );
}

Granularity and hour cycle

granularity trims or extends the time segments, and hourCycle forces 12- or 24-hour display regardless of locale.

Hour precision

1407202609

12-hour time

14072026230pm

Second precision, 24h

14072026213015

Show sourceexamples/date-time-picker/granularity.tsx

examples/date-time-picker/granularity.tsx

"use client";

import { DateTimePicker } from "@dethink/components";
import { CalendarDateTime } from "@internationalized/date";

export function DateTimePickerGranularity() {
  return (
    <div className="mx-auto grid max-w-2xl gap-5 lg:grid-cols-2">
      <DateTimePicker
        label="Hour precision"
        granularity="hour"
        defaultValue={new CalendarDateTime(2026, 7, 14, 9)}
      />
      <DateTimePicker
        label="12-hour time"
        hourCycle={12}
        defaultValue={new CalendarDateTime(2026, 7, 14, 14, 30)}
      />
      <DateTimePicker
        label="Second precision, 24h"
        granularity="second"
        hourCycle={24}
        defaultValue={new CalendarDateTime(2026, 7, 14, 21, 30, 15)}
      />
    </div>
  );
}

Zoned value

A ZonedDateTime value carries its IANA zone — the field shows the zone and the serialized value keeps the offset.

Webinar (New York)

140720260930GMT-4

America/New_York

Value: 2026-07-14T09:30:00-04:00[America/New_York]

Show sourceexamples/date-time-picker/zoned.tsx

examples/date-time-picker/zoned.tsx

"use client";

import { useState } from "react";
import { DateTimePicker, type DateTimePickerValue } from "@dethink/components";
import { parseZonedDateTime } from "@internationalized/date";

export function DateTimePickerZoned() {
  const [value, setValue] = useState<DateTimePickerValue | null>(
    parseZonedDateTime("2026-07-14T09:30[America/New_York]"),
  );

  return (
    <div className="mx-auto max-w-sm space-y-3">
      <DateTimePicker
        label="Webinar (New York)"
        value={value}
        onValueChange={setValue}
        clearable
      />
      <p className="text-muted-foreground text-sm">
        Value: {value ? value.toString() : "none"}
      </p>
    </div>
  );
}

Presets

presets add one-click timestamps to the popover for common choices.

Publish at

ddmmyyyy––––

Show sourceexamples/date-time-picker/presets.tsx

examples/date-time-picker/presets.tsx

"use client";

import { DateTimePicker } from "@dethink/components";
import { CalendarDateTime } from "@internationalized/date";

export function DateTimePickerPresets() {
  return (
    <div className="mx-auto max-w-sm">
      <DateTimePicker
        label="Publish at"
        presets={[
          {
            label: "Launch day 9:00",
            value: new CalendarDateTime(2026, 7, 14, 9, 0),
          },
          {
            label: "Launch day 17:00",
            value: new CalendarDateTime(2026, 7, 14, 17, 0),
          },
          {
            label: "Friday wrap-up",
            value: new CalendarDateTime(2026, 7, 17, 16, 0),
          },
        ]}
      />
    </div>
  );
}

Time selector

Quick picks every 15 minutes, with unavailable times disabled. Type any exact time using the hour and minute segments.

Interview slot

140720261015

Pick times from a 15-minute grid instead of typing them.

Show sourceexamples/date-time-picker/time-selector.tsx

examples/date-time-picker/time-selector.tsx

"use client";

import { DateTimePicker } from "@dethink/components";
import { CalendarDateTime } from "@internationalized/date";

export function DateTimePickerTimeSelector() {
  return (
    <div className="mx-auto max-w-sm">
      <DateTimePicker
        label="Interview slot"
        description="Pick times from a 15-minute grid instead of typing them."
        timeSelector
        timeStep={15}
        minValue={new CalendarDateTime(2026, 7, 14, 8, 0)}
        maxValue={new CalendarDateTime(2026, 7, 14, 18, 0)}
        defaultValue={new CalendarDateTime(2026, 7, 14, 10, 15)}
      />
    </div>
  );
}

Props

DateTimePicker owns its field anatomy — pass a label instead of wrapping it in an external one.

DateTimePicker props
Prop	What it does	Default
`valueDateTimePickerValue \| null`	Controlled value — a CalendarDateTime or ZonedDateTime from @internationalized/date.	Not set
`defaultValueDateTimePickerValue \| null`	Initial value for uncontrolled usage.	Not set
`onValueChange(value: DateTimePickerValue \| null) => void`	Fires when the value changes or is cleared.	Not set
`granularity"hour" \| "minute" \| "second"`	Smallest time segment shown in the field.	`"minute"`
`hourCycle12 \| 24`	Forces 12-hour or 24-hour time display.	`locale default`
`timeZonestring`	IANA zone used for display; ZonedDateTime values carry their own zone.	Not set
`hideTimeZoneboolean`	Hides the time-zone segment for zoned values.	`false`
`presetsDateTimePickerPreset[]`	Quick-pick options ({ label, value }) rendered inside the popover.	`[]`
`timeSelectorboolean`	Shows editable time and quick picks alongside the calendar. Set false for a calendar-only popover.	`true`
`timeStep5 \| 10 \| 15 \| 30 \| 60`	Minute interval used to generate time-selector options.	`30`
`timeOptionsDateTimePickerTimeOption[]`	Explicit time options ({ hour, minute, second, label }) overriding the generated grid.	Not set
`label / description / errorMessageReactNode`	The field label, help text, and error message.	Not set
`namestring`	Name of the hidden input submitted with the serialized ISO value.	Not set
`required / disabled / readOnly / invalidboolean`	Makes the field required, disabled, read-only, or invalid.	`false`
`clearableboolean`	Shows a clear button when a value is set.	`false`
`minValue / maxValueDateValue`	Inclusive bounds validate typed values and disable unavailable calendar dates and quick picks.	Not set
`isDateUnavailable(date: DateValue) => boolean`	Marks individual dates unavailable in the popover calendar.	Not set
`locale / weekStartsOnstring / weekday`	Formatting locale and first day of the week in the popover calendar.	`runtime locale`