Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Date Picker examples · Standard

Date Picker with Disabled Dates for React

A date picker that disables weekends, a five-day range and one specific date.

Framework
UI library

A Date Picker that won't select weekends, the 3rd through the 7th of the current month, or the 22nd. Those days are struck through and dimmed, and they're skipped when you click them. Use it for business days, delivery slots and anything with blackout dates.

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

FAQ

How are the dates disabled?

isDateUnavailable on DatePicker gets each day and returns true for a weekend, a day in the range or the single date. Unavailable days can't be selected and show a line-through.

How are weekends detected?

The function turns the day into a Date and checks getDay() for Sunday or Saturday. For locales whose weekend falls on other days, compare against those days instead.

How is the blocked range written?

Two dates in the current month, the 3rd and four days later. A day is in the range when it compares at or after the start and at or before the end.

How do I block past dates?

Set min on DatePicker to today. Days before it are disabled and the calendar won't navigate earlier, which isDateUnavailable doesn't do.

What does the button say?

Pick a date until one is selected, then that date in long form. The button prints the value itself, formatted with Intl.DateTimeFormat, so the text needs no date library.

Are disabled days announced?

Yes. An unavailable day is aria-disabled, so screen readers say it can't be selected, and the arrow keys still move across it.

All 8 date picker examples