Calendar with Date and Time in Dialog for React

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

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.

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.

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.

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

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