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

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`	-
`variant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

`<DatePickerCalendar>`

Prop	Type	Default	Description
`buttonVariant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

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.

Classes

CSS classes used by this component:

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

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Context Menu Dialog

On This Page

Example Installation Components Props <DatePickerInput><DatePickerButton><DatePickerCalendar>Examples Button Variant Date And Time Styling Classes Accessibility

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

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`	-
`variant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

`<DatePickerCalendar>`

Prop	Type	Default	Description
`buttonVariant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

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.

Classes

CSS classes used by this component:

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

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Context Menu Dialog

On This Page

Example Installation Components Props <DatePickerInput><DatePickerButton><DatePickerCalendar>Examples Button Variant Date And Time Styling Classes Accessibility

Contribute