Skip to content

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

Free

Date Picker with Natural Language for React

A date button set to today. Beside the calendar, Quick Select lists Today, Tomorrow, In 3 days, In a week, In 2 weeks and In a month.

The button shows a calendar icon and today's date. The popover puts a month beside Quick Select: Today, Tomorrow, In 3 days, In a week, In 2 weeks and In a month.

Offer shortcuts for dates people mean by a phrase, such as tomorrow. A Date Input fits if they should type the date instead. In React, Base UI does not turn a phrase into a date.

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>{date ? formatDate(date) : "Pick a date"}</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">
          Quick Select
        </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

How do the shortcuts set the date?

Each is a button inside a DatePickerPresetTrigger whose value is a one-date list. The preset selects it as if you had clicked the day.

How are the shortcut dates computed?

From today, once when the module loads, by adding days, weeks or a month. A page left open past midnight keeps the old dates until it reloads.

Does the picker close after a shortcut?

No. closeOnSelect is false, so the result stays visible next to the shortcuts. Escape, a click outside or the button close it.

How are the calendar and the shortcuts laid out?

DatePickerContent is a row split by divide-x: the calendar, then a column with the Quick Select heading and a Scroll Area of outline buttons.

What does the button say?

The selected date in long form, such as October 10, 2026, or Pick a date when nothing is selected. The button prints the value itself, formatted with Intl.DateTimeFormat, so the text needs no date library.

Can people type next week instead?

Not in this one: the shortcuts are buttons. For typed phrases, see the date picker's natural language demo, which parses the input and keeps the calendar in step.

API Reference

Date Picker

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

Button

Sets variant="outline" and size="sm". 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