Strongtie Design System
Getting StartedComponents

Command Palette

Search for a command to run...

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Code Quality Setup
  • Migration Guide
  • Resources
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tree
Guides
  • Framework Recommendations
Foundations
  • States
  • Variables
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Command
  • Combobox
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  3. Registry
  5. Date Picker

Date Picker

PreviousNext

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>

PropTypeDefaultDescription
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>

PropTypeDefaultDescription
formatDate((date: Date) => string)-Custom function to format the date for display. If not provided, uses the default toLocaleDateString() format.
openboolean-Whether the date picker is currently open.
placeholderstringSelect datePlaceholder 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>

PropTypeDefaultDescription
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

"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

"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>
  )
}
ComboboxMulti Select

On This Page

ExampleInstallationUsageComponentsProps<DatePickerInput><DatePickerButton><DatePickerCalendar>ExamplesDefaultButton VariantDate And Time

Contribute

  • Report an issue
  • Request a feature
  • Edit this page