shadcn.io is an independent project built on shadcn/ui
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 Vue, Ark UI does not turn a phrase into a date.
Installation
Anatomy
Usage
h(DatePickerPresetTrigger as never, { asChild: true, key: shortcut.label, value: [shortcut.date] }, h(Button as never, { size: "sm", variant: "outline" }, [shortcut.label]))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.
