🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Date Picker

A date selection component that combines an input field or button with a calendar popup.

DatePicker provides an intuitive interface for selecting dates by combining a text input or button trigger with a calendar popover. Users can either type dates directly into the input field or pick dates visually from the calendar. This component is ideal for forms, booking systems, scheduling interfaces, or any scenario requiring date input with both keyboard and mouse interaction options.

Built on top of Radix UI's Popover and the Calendar component, with full keyboard navigation, accessibility support, and flexible formatting options.

Registry Component: This component is available from the Strongtie registry. Add it using: npx shadcn@latest add @strongtie/date-picker

Example

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerTrigger,
} from "@/components/ui/date-picker"
import { format } from "date-fns"
import { MdOutlineCalendarToday } from "react-icons/md"

export function DatePickerDefault() {
  const [date, setDate] = useState<Date>()

  return (
    <DatePicker>
      <DatePickerTrigger asChild>
        <Button variant="outline" className="w-[280px]">
          <MdOutlineCalendarToday className="mr-2 h-4 w-4" />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </DatePickerTrigger>
      <DatePickerContent>
        <DatePickerCalendar
          mode="single"
          selected={date}
          onSelect={setDate}
          autoFocus
        />
      </DatePickerContent>
    </DatePicker>
  )
}

Installation

Add this component from the Strongtie registry:


npx shadcn@latest add @strongtie/date-picker

Or by URL:


npx shadcn@latest add https://design.strongtie.io/r/date-picker.json

This will install the component and all required dependencies:

Usage

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

Components

This module exports the following components:

DatePicker
DatePickerTrigger
DatePickerContent
DatePickerInput
DatePickerButton
DatePickerCalendar

Props

`<DatePickerInput>`

Prop	Type	Default	Description
`onCalendarClick`	`(() => void)`	-	Callback fired when the calendar icon button is clicked.
`onOpenPopover`	`(() => void)`	-	Callback fired when the popover should open (on focus or input change).

`<DatePickerButton>`

Prop	Type	Default	Description
`formatDate`	`((date: Date) => string)`	-	Custom function to format the date for display. If not provided, uses the default toLocaleDateString() format.
`open`	`boolean`	-	Whether the date picker is currently open.
`placeholder`	`string`	`Select date`	Placeholder text displayed when no date is selected.
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	-	Button size variant
`variant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-	Button style variant

`<DatePickerCalendar>`

Prop	Type	Default	Description
`buttonVariant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-	Variant for calendar action buttons

Examples

Default

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerTrigger,
} from "@/components/ui/date-picker"
import { format } from "date-fns"
import { MdOutlineCalendarToday } from "react-icons/md"

export function DatePickerDefault() {
  const [date, setDate] = useState<Date>()

  return (
    <DatePicker>
      <DatePickerTrigger asChild>
        <Button variant="outline" className="w-[280px]">
          <MdOutlineCalendarToday className="mr-2 h-4 w-4" />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </DatePickerTrigger>
      <DatePickerContent>
        <DatePickerCalendar
          mode="single"
          selected={date}
          onSelect={setDate}
          autoFocus
        />
      </DatePickerContent>
    </DatePicker>
  )
}

Button Variant

Date

"use client"

import * as React from "react"
import {
  DatePicker,
  DatePickerButton,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerTrigger,
} from "@/components/ui/date-picker"
import { Label } from "@/components/ui/label"

function formatDate(date: Date | undefined) {
  if (!date) {
    return ""
  }

  return date.toLocaleDateString("en-US", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  })
}

export function DatePickerButtonVariant() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date | undefined>()

  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="date-button">Date</Label>
      <DatePicker open={open} onOpenChange={setOpen}>
        <DatePickerTrigger asChild>
          <div>
            <DatePickerButton id="date-button" placeholder="Select date">
              {date ? formatDate(date) : "Select date"}
            </DatePickerButton>
          </div>
        </DatePickerTrigger>
        <DatePickerContent align="start">
          <DatePickerCalendar
            mode="single"
            selected={date}
            onSelect={(selectedDate) => {
              setDate(selectedDate)
              setOpen(false)
            }}
          />
        </DatePickerContent>
      </DatePicker>
    </div>
  )
}

Date And Time

Date

Time

"use client"

import * as React from "react"
import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerInput,
  DatePickerTrigger,
} from "@/components/ui/date-picker"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

function formatDate(date: Date | undefined) {
  if (!date) {
    return ""
  }

  return date.toLocaleDateString("en-US", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  })
}

function isValidDate(date: Date | undefined) {
  if (!date) {
    return false
  }
  return !isNaN(date.getTime())
}

export function DatePickerDateAndTime() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date | undefined>(new Date())
  const [month, setMonth] = React.useState<Date | undefined>(date)
  const [value, setValue] = React.useState(formatDate(date))

  return (
    <div className="flex gap-4">
      <div className="flex flex-col gap-2">
        <Label htmlFor="date">Date</Label>
        <DatePicker open={open} onOpenChange={setOpen}>
          <DatePickerTrigger asChild>
            <div>
              <DatePickerInput
                id="date"
                value={value}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                  const date = new Date(e.target.value)
                  setValue(e.target.value)
                  if (isValidDate(date)) {
                    setDate(date)
                    setMonth(date)
                  }
                }}
                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                  if (e.key === "ArrowDown") {
                    e.preventDefault()
                    setOpen(true)
                  }
                }}
                onCalendarClick={() => setOpen(true)}
              />
            </div>
          </DatePickerTrigger>
          <DatePickerContent align="end" alignOffset={-8} sideOffset={4}>
            <DatePickerCalendar
              mode="single"
              selected={date}
              month={month}
              onMonthChange={setMonth}
              onSelect={(date: Date | undefined) => {
                setDate(date)
                setValue(formatDate(date))
                setOpen(false)
              }}
            />
          </DatePickerContent>
        </DatePicker>
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="time-picker">Time</Label>
        <Input
          type="time"
          id="time-picker"
          step="1"
          defaultValue="10:30:00"
          className="w-[140px]"
        />
      </div>
    </div>
  )
}

Combobox Multi Select

On This Page

Example Installation Usage Components Props <DatePickerInput><DatePickerButton><DatePickerCalendar>Examples Default Button Variant Date And Time

Contribute

Date Picker

A date selection component that combines an input field or button with a calendar popup.

Built on top of Radix UI's Popover and the Calendar component, with full keyboard navigation, accessibility support, and flexible formatting options.

Registry Component: This component is available from the Strongtie registry. Add it using: npx shadcn@latest add @strongtie/date-picker

Example

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerTrigger,
} from "@/components/ui/date-picker"
import { format } from "date-fns"
import { MdOutlineCalendarToday } from "react-icons/md"

export function DatePickerDefault() {
  const [date, setDate] = useState<Date>()

  return (
    <DatePicker>
      <DatePickerTrigger asChild>
        <Button variant="outline" className="w-[280px]">
          <MdOutlineCalendarToday className="mr-2 h-4 w-4" />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </DatePickerTrigger>
      <DatePickerContent>
        <DatePickerCalendar
          mode="single"
          selected={date}
          onSelect={setDate}
          autoFocus
        />
      </DatePickerContent>
    </DatePicker>
  )
}

Installation

Add this component from the Strongtie registry:


npx shadcn@latest add @strongtie/date-picker

Or by URL:


npx shadcn@latest add https://design.strongtie.io/r/date-picker.json

This will install the component and all required dependencies:

Usage

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

Components

This module exports the following components:

DatePicker
DatePickerTrigger
DatePickerContent
DatePickerInput
DatePickerButton
DatePickerCalendar

Props

`<DatePickerInput>`

Prop	Type	Default	Description
`onCalendarClick`	`(() => void)`	-	Callback fired when the calendar icon button is clicked.
`onOpenPopover`	`(() => void)`	-	Callback fired when the popover should open (on focus or input change).

`<DatePickerButton>`

Prop	Type	Default	Description
`formatDate`	`((date: Date) => string)`	-	Custom function to format the date for display. If not provided, uses the default toLocaleDateString() format.
`open`	`boolean`	-	Whether the date picker is currently open.
`placeholder`	`string`	`Select date`	Placeholder text displayed when no date is selected.
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	-	Button size variant
`variant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-	Button style variant

`<DatePickerCalendar>`

Prop	Type	Default	Description
`buttonVariant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-	Variant for calendar action buttons

Examples

Default

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerTrigger,
} from "@/components/ui/date-picker"
import { format } from "date-fns"
import { MdOutlineCalendarToday } from "react-icons/md"

export function DatePickerDefault() {
  const [date, setDate] = useState<Date>()

  return (
    <DatePicker>
      <DatePickerTrigger asChild>
        <Button variant="outline" className="w-[280px]">
          <MdOutlineCalendarToday className="mr-2 h-4 w-4" />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </DatePickerTrigger>
      <DatePickerContent>
        <DatePickerCalendar
          mode="single"
          selected={date}
          onSelect={setDate}
          autoFocus
        />
      </DatePickerContent>
    </DatePicker>
  )
}

Button Variant

Date

"use client"

import * as React from "react"
import {
  DatePicker,
  DatePickerButton,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerTrigger,
} from "@/components/ui/date-picker"
import { Label } from "@/components/ui/label"

function formatDate(date: Date | undefined) {
  if (!date) {
    return ""
  }

  return date.toLocaleDateString("en-US", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  })
}

export function DatePickerButtonVariant() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date | undefined>()

  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="date-button">Date</Label>
      <DatePicker open={open} onOpenChange={setOpen}>
        <DatePickerTrigger asChild>
          <div>
            <DatePickerButton id="date-button" placeholder="Select date">
              {date ? formatDate(date) : "Select date"}
            </DatePickerButton>
          </div>
        </DatePickerTrigger>
        <DatePickerContent align="start">
          <DatePickerCalendar
            mode="single"
            selected={date}
            onSelect={(selectedDate) => {
              setDate(selectedDate)
              setOpen(false)
            }}
          />
        </DatePickerContent>
      </DatePicker>
    </div>
  )
}

Date And Time

Date

Time

"use client"

import * as React from "react"
import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerInput,
  DatePickerTrigger,
} from "@/components/ui/date-picker"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

function formatDate(date: Date | undefined) {
  if (!date) {
    return ""
  }

  return date.toLocaleDateString("en-US", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  })
}

function isValidDate(date: Date | undefined) {
  if (!date) {
    return false
  }
  return !isNaN(date.getTime())
}

export function DatePickerDateAndTime() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date | undefined>(new Date())
  const [month, setMonth] = React.useState<Date | undefined>(date)
  const [value, setValue] = React.useState(formatDate(date))

  return (
    <div className="flex gap-4">
      <div className="flex flex-col gap-2">
        <Label htmlFor="date">Date</Label>
        <DatePicker open={open} onOpenChange={setOpen}>
          <DatePickerTrigger asChild>
            <div>
              <DatePickerInput
                id="date"
                value={value}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                  const date = new Date(e.target.value)
                  setValue(e.target.value)
                  if (isValidDate(date)) {
                    setDate(date)
                    setMonth(date)
                  }
                }}
                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                  if (e.key === "ArrowDown") {
                    e.preventDefault()
                    setOpen(true)
                  }
                }}
                onCalendarClick={() => setOpen(true)}
              />
            </div>
          </DatePickerTrigger>
          <DatePickerContent align="end" alignOffset={-8} sideOffset={4}>
            <DatePickerCalendar
              mode="single"
              selected={date}
              month={month}
              onMonthChange={setMonth}
              onSelect={(date: Date | undefined) => {
                setDate(date)
                setValue(formatDate(date))
                setOpen(false)
              }}
            />
          </DatePickerContent>
        </DatePicker>
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="time-picker">Time</Label>
        <Input
          type="time"
          id="time-picker"
          step="1"
          defaultValue="10:30:00"
          className="w-[140px]"
        />
      </div>
    </div>
  )
}

Combobox Multi Select

On This Page

Example Installation Usage Components Props <DatePickerInput><DatePickerButton><DatePickerCalendar>Examples Default Button Variant Date And Time

Contribute