🚧 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.

Example

"use client"

import { useState } from "react"
import { Button } from "@strongtie/design-system/button"
import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerTrigger,
} from "@strongtie/design-system/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


npm install @strongtie/design-system

import { DatePicker } from "@strongtie/design-system/date-picker"

Components

This module exports the following components:

DatePicker
DatePickerTrigger
DatePickerContent
DatePickerInput
DatePickerButton
DatePickerCalendar

Props

`<DatePickerInput>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

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

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default	Description
`formatDate`	`((date: Date) => string)`	-	Custom function to format the date for display. If not provided, uses the default toLocaleDateString() format.
`placeholder`	`string`	`Select date`	Placeholder text displayed when no date is selected.
`size`	`default` \| `sm` \| `lg` \| `icon`	`'default'`	The size of the button, affecting padding and font size.
`variant`	`link` \| `default` \| `secondary` \| `outline` \| `ghost` \| `destructive`	`'default'`	The visual style variant of the button.

Examples

"use client"

import { useState } from "react"
import { Button } from "@strongtie/design-system/button"
import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerTrigger,
} from "@strongtie/design-system/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 "@strongtie/design-system/date-picker"
import { Label } from "@strongtie/design-system/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 "@strongtie/design-system/date-picker"
import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Component Slots

The following data attributes are used to identify component parts:

date-picker
date-picker-button
date-picker-calendar
date-picker-content
date-picker-input
date-picker-trigger

Additional Classes

Other CSS classes used by this component:

date-picker-button
date-picker-calendar
date-picker-content
date-picker-icon
date-picker-icon-down
date-picker-input
date-picker-input-button
date-picker-input-wrapper

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI popover Documentation

Context Menu Dialog

On This Page

Example Installation Components Props <DatePickerInput><DatePickerButton>Examples Button Variant Date And Time Styling Component Slots Additional Classes Accessibility Resources

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.

Example

"use client"

import { useState } from "react"
import { Button } from "@strongtie/design-system/button"
import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerTrigger,
} from "@strongtie/design-system/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


npm install @strongtie/design-system

import { DatePicker } from "@strongtie/design-system/date-picker"

Components

This module exports the following components:

DatePicker
DatePickerTrigger
DatePickerContent
DatePickerInput
DatePickerButton
DatePickerCalendar

Props

`<DatePickerInput>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

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

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default	Description
`formatDate`	`((date: Date) => string)`	-	Custom function to format the date for display. If not provided, uses the default toLocaleDateString() format.
`placeholder`	`string`	`Select date`	Placeholder text displayed when no date is selected.
`size`	`default` \| `sm` \| `lg` \| `icon`	`'default'`	The size of the button, affecting padding and font size.
`variant`	`link` \| `default` \| `secondary` \| `outline` \| `ghost` \| `destructive`	`'default'`	The visual style variant of the button.

Examples

"use client"

import { useState } from "react"
import { Button } from "@strongtie/design-system/button"
import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerTrigger,
} from "@strongtie/design-system/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 "@strongtie/design-system/date-picker"
import { Label } from "@strongtie/design-system/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 "@strongtie/design-system/date-picker"
import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/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>
  )
}