shadcn.io is not affiliated with official shadcn/ui
Date Picker examples · Standard
Date Picker with Natural Language for React
A date picker with quick-select shortcuts such as Tomorrow, In a week and In a month beside the calendar.
A Date Picker with a column of shortcuts next to the month: Today, Tomorrow, In 3 days, In a week, In 2 weeks and In a month. A shortcut selects its date and moves the calendar to it. Use it for due dates and follow-ups, where most picks are a few days or weeks out.
Preview
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.
Related
- Date Picker with RangeA date range picker that shows two months
- Date Picker as Appointment PickerA date picker that opens a calendar
- Date Picker with Month and Year SelectorA date picker with month and year
- Date Picker with Date and TimeA date picker with a time field under the
- Date Picker with Disabled DatesA date picker that disables weekends, a
- Date Picker with Custom Select Day StyleA date picker with round days that