shadcn.io is not affiliated with official shadcn/ui
Date Picker examples · Standard
Date Picker with Multiple Day Selection for React
A date picker for choosing several separate days, with the count of selected dates on the button.
A Date Picker in multiple selection mode: each click adds or removes a day, and the button reads how many are selected. It starts with three days of the current month. Use it for availability, recurring sessions and any set of days that isn't a range.
Preview
Installation
FAQ
How does multiple selection work?
selectionMode="multiple" on DatePicker. Clicking a day toggles it in the value, which is a list of dates in the order they were picked.
Why doesn't the picker close after a click?
closeOnSelect is false, so you can pick several days in one go. Escape, a click outside or the button close it.
What does the button say?
1 date selected, 3 dates selected and so on, or Pick dates when none are selected. Show the dates themselves under the picker if people need to check them.
Can I cap how many days are picked?
Yes. In the value change handler, ignore the new value when it's longer than your limit, and say so near the picker.
Related
- Date Picker with RangeA date range picker that shows two months
- Date Picker with Disabled DatesA date picker that disables weekends, a
- Date Picker with Custom Select Day StyleA date picker with round days that
- Date Picker as Appointment PickerA date picker that opens a calendar
- Date Picker with Natural LanguageA date picker with quick-select shortcuts
- Date Picker with Month and Year SelectorA date picker with month and year