Skip to content

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

Free

Date Picker as Appointment Picker for React

A button that shows today's date. Opening it puts a calendar beside Available Times, from 09:00 AM through 04:30 PM.

The button shows a calendar icon and today's date. The popover puts a month beside a list labeled Available Times, from 09:00 AM down to 04:30 PM.

Use it to book a date and a slot together. A Calendar alone is enough when there is no time to pick. In React, Base UI does not know which times are free.

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

Date Picker anatomy: content, prev trigger, next trigger, table cell, trigger, value

Usage

<DatePicker
  closeOnSelect={false}
  onValueChange={handleValueChange}
  positioning={positioning}
  value={value}
>
  <DatePickerTrigger asChild>
    <Button className="w-70 justify-start font-normal" variant="outline">
      <CalendarIcon aria-hidden="true" data-icon="inline-start" />
      <span>{label}</span>
    </Button>
  </DatePickerTrigger>
  <DatePickerContent className="flex divide-x overflow-hidden p-0">
    <div className="p-3">
      <DatePickerViewControl>
        <DatePickerPrevTrigger />
        <DatePickerViewDate />
        <DatePickerNextTrigger />
      </DatePickerViewControl>
      <DatePickerTable>
        <DatePickerWeekDays />
        <DatePickerTableDays />
      </DatePickerTable>
    </div>
    <div className="relative w-62 overflow-hidden">
      <div className="absolute inset-0 flex flex-col gap-4">
        <p className="px-4 pt-4 text-center font-medium text-sm">
          Available Times
        </p>
        <ScrollArea className="min-h-0 flex-1">
          <div className="flex flex-col gap-2 px-4 pb-4">
{/* The rest of the file is under Installation. */}

FAQ

Why doesn't the picker close when I pick a day?

closeOnSelect is false on DatePicker, so it stays open for the time. Escape, a click outside or the button close it.

Where do the time slots come from?

A fixed list of fourteen strings in the file, half-hour steps with a lunch gap. The selected one is a solid button and the rest are outlined. Load the list for the picked day from your booking system to show real availability.

What does the button say?

The date in long form, plus at and the time once a slot is picked, or Pick a date and time with neither. The button prints the value itself, formatted with Intl.DateTimeFormat, so the text needs no date library.

How are the calendar and the slots laid out?

DatePickerContent is a row split by divide-x. The calendar keeps its padding, and the slots column has a fixed width with the Available Times heading and a Scroll Area that fills the calendar's height.

Is the time stored with the date?

No: the date is the picker's value and the time is a separate string. Combine them when you submit, for example into an ISO date-time.

Can I book from the keyboard?

Yes. The arrow keys move through the days and Enter picks one, then Tab reaches the slots, which are buttons.

API Reference

Date Picker

Sets closeOnSelect={false}, onValueChange={handleValueChange}, positioning={positioning}, value={value} and asChild. The rest is on the Date Picker page.

Button

Sets variant="outline", onClick={handleTimeClick}, size="sm", value={time} and variant={selectedTime === time ? "default" : "outline"}. The rest is on the Button page.

Scroll Area

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

All 8 date picker examples