BetaBuilt on Vercel’s UI SDK 0.1.0-beta.1. Its API may change.

Date picker

A date picker on Vercel's UI SDK where people type a date in their language or pick it, with ranges, presets and ISO values.

Form components
18 parts
9 examples
Updated Nov 13, 2026

Depends on

@tabler/icons-react
@ui-sdk/core
@ui-sdk/react

MM/DD/YYYY

import {
  DatePicker,
  DatePickerClear,
  DatePickerContent,
  DatePickerControl,
  DatePickerHint,
  DatePickerInput,
  DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"

function UiSdkDatePickerDemo() {
  return (
    <DatePicker defaultValue="2026-11-20" className="max-w-56">
      <DatePickerControl>
        <DatePickerInput aria-label="Due date" />
        <DatePickerClear />
        <DatePickerTrigger />
      </DatePickerControl>
      <DatePickerHint />
      <DatePickerContent />
    </DatePicker>
  )
}

export { UiSdkDatePickerDemo }

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-date-picker.json

Adds the component, the HextaUI theme tokens and any HextaUI components it depends on.

Add the theme tokens to your global CSS, if you haven’t yet.

Install the dependencies.

pnpm add @ui-sdk/react@0.1.0-beta.1 @ui-sdk/core@0.1.0-beta.1 @tabler/icons-react cn

3
Copy and paste the following code into your project.
components/ui/ui-sdk-date-picker.tsx
"use client" import * as React from "react" import { IconCalendar, IconChevronLeft, IconChevronRight, IconX,
components/ui/button.tsx
"use client" import * as React from "react" import { Button as ButtonPrimitive } from "@base-ui/react/button" import { IconAlertCircle, IconCircleCheck } from "@tabler/icons-react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "cn"
Update the import paths to match your project setup.

Usage

UI SDK adds a little CSS of its own in a cascade layer named ui-sdk. Declare that layer at the top of your global stylesheet, above the Tailwind import, so your classes win over it.

@layer ui-sdk;

@import "tailwindcss";

import {
  DatePicker,
  DatePickerContent,
  DatePickerControl,
  DatePickerHint,
  DatePickerInput,
  DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"

<DatePicker defaultValue="2026-11-20">
  <DatePickerControl>
    <DatePickerInput aria-label="Due date" />
    <DatePickerTrigger />
  </DatePickerControl>
  <DatePickerHint />
  <DatePickerContent />
</DatePicker>

Values are ISO date strings like 2026-11-20, with no time or time zone, so you don’t need a date library. People type in their own date order, like 11/20/2026 or 20.11.2026, and the field formats the date when they press Enter or leave it. DatePickerContent with no children renders a styled calendar.

Composition

DatePicker
├── DatePickerControl
│   ├── DatePickerInput
│   ├── DatePickerSeparator
│   ├── DatePickerClear
│   └── DatePickerTrigger
├── DatePickerHint
└── DatePickerContent
    ├── DatePickerPreset
    └── DatePickerCalendar
        ├── CalendarPrevious
        ├── CalendarHeading
        ├── CalendarNext
        └── CalendarGrid
            ├── CalendarWeekdays
            │   └── CalendarWeekday
            └── CalendarWeeks
                └── CalendarDay

Examples

Range

Open example

With mode="range", add a second input with end. The calendar stays open after the first date and closes after the second. months={2} shows two months side by side, stacked on small screens.

import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerControl,
  DatePickerInput,
  DatePickerSeparator,
  DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"

function UiSdkDatePickerRange() {
  return (
    <DatePicker
      mode="range"
      months={2}
      pageBy="page"
      defaultValue={["2026-11-18", "2026-11-24"]}
      className="max-w-72"
    >
      <DatePickerControl>
        <DatePickerInput aria-label="Check-in" />
        <DatePickerSeparator />
        <DatePickerInput end aria-label="Check-out" />
        <DatePickerTrigger />
      </DatePickerControl>
      <DatePickerContent>
        <DatePickerCalendar months={2} />
      </DatePickerContent>
    </DatePicker>
  )
}

export { UiSdkDatePickerRange }

Presets

Open example

A DatePickerPreset picks its value and closes the popup. It shows as pressed while its value is selected.

"use client"

import * as React from "react"

import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerControl,
  DatePickerInput,
  DatePickerPreset,
  DatePickerSeparator,
  DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"

function isoDate(date: Date) {
  const month = String(date.getMonth() + 1).padStart(2, "0")
  const day = String(date.getDate()).padStart(2, "0")
  return `${date.getFullYear()}-${month}-${day}`
}

function daysAgo(days: number) {
  const date = new Date()
  date.setDate(date.getDate() - days)
  return isoDate(date)
}

function UiSdkDatePickerPresets() {
  const [today, setToday] = React.useState<string | null>(null)

  React.useEffect(() => {
    setToday(isoDate(new Date()))
  }, [])

  const presets = today
    ? [
        { label: "Today", value: [today, today] as [string, string] },
        {
          label: "Last 7 days",
          value: [daysAgo(6), today] as [string, string],
        },
        {
          label: "Last 30 days",
          value: [daysAgo(29), today] as [string, string],
        },
        {
          label: "Last 90 days",
          value: [daysAgo(89), today] as [string, string],
        },
      ]
    : []

  return (
    <DatePicker mode="range" className="max-w-72">
      <DatePickerControl>
        <DatePickerInput aria-label="From" />
        <DatePickerSeparator />
        <DatePickerInput end aria-label="To" />
        <DatePickerTrigger />
      </DatePickerControl>
      <DatePickerContent>
        <div className="flex flex-wrap gap-0.5 border-b pb-3 sm:w-32 sm:flex-col sm:flex-nowrap sm:border-e sm:border-b-0 sm:pe-3 sm:pb-0">
          {presets.map((preset) => (
            <DatePickerPreset key={preset.label} value={preset.value}>
              {preset.label}
            </DatePickerPreset>
          ))}
        </div>
        <DatePickerCalendar />
      </DatePickerContent>
    </DatePicker>
  )
}

export { UiSdkDatePickerPresets }

Min, max and unavailable dates

Open example

min, max and unavailable apply to typing and picking. Here weekends and two holidays can’t be picked, and a typed one is marked invalid.

import {
  DatePicker,
  DatePickerContent,
  DatePickerControl,
  DatePickerHint,
  DatePickerInput,
  DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"

function UiSdkDatePickerLimits() {
  return (
    <DatePicker
      min="2026-11-02"
      max="2026-12-18"
      unavailable={[{ weekday: [0, 6] }, "2026-11-26", "2026-11-27"]}
      defaultMonth="2026-11"
      className="max-w-56"
    >
      <DatePickerControl>
        <DatePickerInput aria-label="Delivery date" />
        <DatePickerTrigger />
      </DatePickerControl>
      <DatePickerHint />
      <DatePickerContent />
    </DatePicker>
  )
}

export { UiSdkDatePickerLimits }

Language

Open example

locale sets the typed format, the hint and the calendar’s names. Without it, the picker reads the page’s lang. The buttons have English names, so pass aria-label to translate them.

import {
  DatePicker,
  DatePickerContent,
  DatePickerControl,
  DatePickerHint,
  DatePickerInput,
  DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"

function UiSdkDatePickerLocale() {
  return (
    <DatePicker locale="de" defaultValue="2026-12-03" className="max-w-56">
      <DatePickerControl>
        <DatePickerInput aria-label="Lieferdatum" />
        <DatePickerTrigger aria-label="Datum wählen" />
      </DatePickerControl>
      <DatePickerHint />
      <DatePickerContent aria-label="Datum wählen" />
    </DatePicker>
  )
}

export { UiSdkDatePickerLocale }

Form

Open example

With a name, the date submits as an ISO string. required blocks an empty submit, text that isn’t a date blocks one too, and reset goes back to defaultValue.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  DatePicker,
  DatePickerContent,
  DatePickerControl,
  DatePickerHint,
  DatePickerInput,
  DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"

function UiSdkDatePickerForm() {
  const [submitted, setSubmitted] = React.useState<string | null>(null)

  return (
    <form
      className="flex w-full max-w-56 flex-col gap-3"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        setSubmitted(String(data.get("start")))
      }}
    >
      <DatePicker name="start" required>
        <DatePickerControl>
          <DatePickerInput aria-label="Start date" />
          <DatePickerTrigger />
        </DatePickerControl>
        <DatePickerHint />
        <DatePickerContent />
      </DatePicker>
      <div className="flex items-center gap-3">
        <Button type="submit" size="sm">
          Submit
        </Button>
        <Button type="reset" size="sm" variant="ghost">
          Reset
        </Button>
      </div>
      <p className="text-sm text-muted-foreground tabular-nums">
        {submitted ? `Submitted ${submitted}` : "Nothing submitted yet."}
      </p>
    </form>
  )
}

export { UiSdkDatePickerForm }

Controller

Open example

A controller from createDatePickerController() sets the date or opens the calendar from anywhere, and onValueChange reports each change. Leave value unset here, so the calendar can move to the month the controller picks.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  createDatePickerController,
  DatePicker,
  DatePickerContent,
  DatePickerControl,
  DatePickerInput,
  DatePickerTrigger,
  type DatePickerValue,
} from "@/components/ui/ui-sdk-date-picker"

function UiSdkDatePickerController() {
  const [picker] = React.useState(createDatePickerController)
  const [value, setValue] = React.useState<DatePickerValue>(null)

  return (
    <div className="flex w-full max-w-56 flex-col gap-3">
      <DatePicker controller={picker} onValueChange={setValue}>
        <DatePickerControl>
          <DatePickerInput aria-label="Party date" />
          <DatePickerTrigger />
        </DatePickerControl>
        <DatePickerContent />
      </DatePicker>
      <div className="flex gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => picker.setValue("2026-12-25")}
        >
          Choose Christmas
        </Button>
        <Button variant="ghost" size="sm" onClick={() => picker.open()}>
          Open
        </Button>
      </div>
      <p className="text-sm text-muted-foreground tabular-nums">
        {typeof value === "string" ? value : "No date"}
      </p>
    </div>
  )
}

export { UiSdkDatePickerController }

Disabled and read-only

Open example

disabled stops typing and opening. readOnly still opens the calendar so people can look, but nothing can change.

import {
  DatePicker,
  DatePickerContent,
  DatePickerControl,
  DatePickerInput,
  DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"

function UiSdkDatePickerDisabled() {
  return (
    <div className="flex w-full max-w-56 flex-col gap-3">
      <DatePicker defaultValue="2026-11-20" disabled>
        <DatePickerControl>
          <DatePickerInput aria-label="Disabled date" />
          <DatePickerTrigger />
        </DatePickerControl>
        <DatePickerContent />
      </DatePicker>
      <DatePicker defaultValue="2026-11-20" readOnly>
        <DatePickerControl>
          <DatePickerInput aria-label="Read-only date" />
          <DatePickerTrigger />
        </DatePickerControl>
        <DatePickerContent />
      </DatePicker>
    </div>
  )
}

export { UiSdkDatePickerDisabled }

Right to left

Open example

With an Arabic locale inside dir=rtl, the field, the arrows and the calendar all run from the right.

import {
  DatePicker,
  DatePickerContent,
  DatePickerControl,
  DatePickerInput,
  DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"

function UiSdkDatePickerRtl() {
  return (
    <div dir="rtl" className="w-full max-w-56">
      <DatePicker locale="ar" defaultValue="2026-11-20">
        <DatePickerControl>
          <DatePickerInput aria-label="تاريخ الاستحقاق" />
          <DatePickerTrigger aria-label="اختر التاريخ" />
        </DatePickerControl>
        <DatePickerContent aria-label="اختر التاريخ" />
      </DatePicker>
    </div>
  )
}

export { UiSdkDatePickerRtl }

Keyboard

Key	Action
`Enter`	In the input, reads the typed date. On a day, picks it.
`←→↑↓`	Moves between days, or by a week up and down.
`Page UpPage Down`	Moves a month back or forward.
`HomeEnd`	Moves to the start or end of the week.
`Esc`	Cancels an unfinished range, or else closes the calendar.

Accessibility

The calendar opens as a dialog with a grid of days, each named in full, like “Friday, November 20, 2026”. The hint describes the input, so screen readers hear the format to type. Text that isn’t a date sets aria-invalid and keeps the old value, and unavailable days stay focusable so keyboard users still hear them.

The trigger, popup and arrows have English names. Pass aria-label to each to translate them. Inputs use a 16px font on touch screens so iOS doesn’t zoom, and the popup only scales in when motion is allowed.

API reference

Each part wraps the UI SDK part of the same name and accepts all of its props, including render and a className that can be a function of the part’s state. DatePickerControl, DatePickerSeparator and DatePickerCalendar are HextaUI layout parts.

DatePicker

Prop	Type	Default
`mode`	`"single" \| "range"`	`"single"`
`value`	`string \| [string, string] \| null`	`–`
`defaultValue`	`string \| [string, string] \| null`	`–`
`onValueChange`	`(value, details) => void`	`–`
`min`	`string`	`–`
`max`	`string`	`–`
`unavailable`ISO dates, { from, to }, { weekday }, { before }, { after } or a function.	`DateMatchers`	`–`
`months`	`number`	`1`
`pageBy`	`"month" \| "page"`	`"month"`
`locale`	`string`	`–`
`weekStartsOn`	`number`	`–`
`minDays`	`number`	`–`
`maxDays`	`number`	`–`
`closeOnSelect`	`boolean`	`true`
`disabled`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`name`	`string`	`–`
`startName`	`string`	`–`
`endName`	`string`	`–`
`required`	`boolean`	`false`
`open`	`boolean`	`–`
`onOpenChange`	`(open, details) => void`	`–`
`controller`From createDatePickerController().	`DatePickerController`	`–`

Attribute	Description
`data-slot="date-picker"`	Target the date picker in CSS.
`data-open`	Present while open.
`data-invalid`	Present while an input holds text that isn’t a date.
`data-disabled`	Present when disabled.
`data-readonly`	Present when read-only.

DatePickerInput

Prop	Type	Default
`end`Makes it a range’s end.	`boolean`	`false`

DatePickerTrigger

Prop	Type	Default
`children`Defaults to a calendar icon.	`ReactNode`	`–`
`aria-label`	`string`	`"Choose date"`

DatePickerClear

Prop	Type	Default
`children`Defaults to an X icon named Clear. It hides while there’s nothing to clear.	`ReactNode`	`–`

DatePickerContent

Prop	Type	Default
`children`Defaults to a DatePickerCalendar.	`ReactNode`	`–`
`align`	`Align`	`"start"`
`sideOffset`	`number`	`6`
`collisionPadding`	`number`	`8`

Attribute	Description
`data-slot="date-picker-content"`	Target the popup in CSS.
`--cell-size`	The size of each day, larger on touch screens.

DatePickerCalendar

Prop	Type	Default
`months`How many grids to render, side by side.	`number`	`1`

DatePickerPreset

Prop	Type	Default
`value`	`string \| [string, string]`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

CalendarDay

Attribute	Description
`data-slot="calendar-day"`	Target a day in CSS.
`data-today`	Present on today.
`data-range-start`	Present where a range starts.
`data-range-end`	Present where a range ends.
`data-unavailable`	Present on a day that can’t be picked.
`data-outside`	Present on a day of the next or previous month.