Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Calendar with Date and Time in Dialog for React

A Select Date & Time button that opens a calendar with a Time field under it, starting at 12:00.

Select Date & Time opens a dialog with that title. A month grid sits above a Time field that starts at 12:00. The day and the time stay separate.

Use it when date and time should be chosen without leaving the task. Show the grid on the page if it is the whole task. A Date Picker fits a form that only has room for a field. In React, Base UI does not combine the two values.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Calendar anatomy: prev trigger, month select, year select, next trigger, table, table cell

Usage

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Select Date & Time
  </DialogTrigger>
  <DialogContent className="sm:max-w-fit">
    <DialogHeader>
      <DialogTitle>Select Date & Time</DialogTitle>
    </DialogHeader>
    <div className="divide-y overflow-hidden rounded-md border bg-background">
      <Calendar mode="single" onSelect={setDate} selected={date} />
      <Field className="p-4">
        <FieldLabel>Time</FieldLabel>
        <Input onChange={handleTimeChange} type="time" value={time} />
      </Field>
    </div>
  </DialogContent>
</Dialog>

FAQ

How do I read the selected date?

mode="single" makes selected one date and onSelect the setter. This demo stores that date in state, starting from new Date().

How is the time entered?

The time is an Input with type="time" inside a Field. FieldLabel reads Time, value starts at 12:00, and onChange stores event.target.value in its own state. Changing the time leaves the calendar date as it is.

Are the date and the time one value?

date and time are two pieces of state. The calendar updates date, and the input updates time. This demo keeps the hours and minutes on the time state.

How is the input attached to the calendar?

Inside the dialog, a divide-y stack with overflow-hidden, rounded-md and border holds the calendar, then the field. The field has p-4.

How is the dialog opened?

DialogTrigger is a button reading Select Date & Time. It opens DialogContent with sm:max-w-fit, and DialogTitle reads Select Date & Time.

What is selected when the dialog calendar renders?

The calendar starts on today, and the time input starts at 12:00. Opening the dialog shows those initial values.

API Reference

Dialog

No extra props in this demo. The rest is on the Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

Calendar

Sets mode="single", onSelect={setDate} and selected={date}. The rest is on the Calendar page.

Field

No extra props in this demo. The rest is on the Field page.

Input

Sets onChange={handleTimeChange}, type="time" and value={time}. The rest is on the Input page.

All 16 calendar examples