104Get started
HextaUI

Date picker: Controlled

Pass value and onValueChange. Cleared values are null. The calendar always opens on the month of the selected date, and picking a day closes it and returns focus to the button.

null
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { DatePicker } from "@/components/ui/date-picker"

function daysFromToday(days: number) {
  const date = new Date()
  date.setHours(0, 0, 0, 0)
  date.setDate(date.getDate() + days)
  return date
}

const isoDay = new Intl.DateTimeFormat("en-CA", {
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
})

export function DatePickerControlled() {
  const [date, setDate] = React.useState<Date | null>(null)

  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <DatePicker value={date} onValueChange={setDate} clearable />
      <Button variant="ghost" onClick={() => setDate(daysFromToday(0))}>
        Today
      </Button>
      <Button variant="ghost" onClick={() => setDate(daysFromToday(7))}>
        In a week
      </Button>
      <output className="text-sm text-muted-foreground tabular-nums">
        {date ? isoDay.format(date) : "null"}
      </output>
    </div>
  )
}

Add this example

This adds the example as components/examples/date-picker/controlled.tsx, together with the Date picker component and the HextaUI theme tokens it needs.

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

To add only the component, follow the Date picker installation.

Props in this example

The Date picker props this example sets, from the API reference.

DatePicker

PropTypeDefault
value
Date | null–
onValueChange
(value: Date | null) => void–
clearableAdds a Clear button below the calendar once there is a value.
booleanfalse

Every prop is in the Date picker API reference.

More Date picker examples

See them all, with keyboard support and accessibility notes, on the Date picker page.

Related components