Skip to content

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

Free

Date Picker with Disabled Dates for Solid

A Pick a date button. Weekends, the 3rd through the 7th of this month, and the 22nd cannot be chosen.

UI library: Ark UI

The button says Pick a date, with a calendar icon. In the month, weekends, the 3rd through the 7th, and the 22nd are unavailable.

Disable dates that cannot be booked, such as weekends and a blocked range. A Calendar can show the same closed days without a field. In Solid, Ark UI does not choose which dates to close.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Date Picker anatomy: content, prev trigger, next trigger, table cell, trigger, value

Usage

<DatePicker isDateUnavailable={isDateUnavailable} onValueChange={handleValueChange} positioning={positioning} value={value()}>
      <DatePickerTrigger asChild={props => <Button {...props({
      "class": "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>} />
      <DatePickerContent>
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarViewDate />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </DatePickerContent>
    </DatePicker>

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.

API Reference

Date Picker

Sets isDateUnavailable={isDateUnavailable}, onValueChange={handleValueChange}, positioning={positioning}, value={value()}, asChild and props. The rest is on the Date Picker page.

Button

Sets props, w-70, justify-start, font-normal and variant="outline". The rest is on the Button page.

Calendar

No extra props in this demo. The rest is on the Calendar page.

All 8 date picker examples