Date Picker

since 1.0

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

Example

Variant

Size

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

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

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

Variants

size

defaultsmlgiconicon-smicon-lg

variant

linkdefaultdestructiveoutlinesecondaryghost

buttonVariant

linkdefaultdestructiveoutlinesecondaryghost

Examples

Button Variant

Variant

Size

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

Variant

Size

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>
  )
}

Context Menu Dialog

Date Picker

since 1.0

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

Example

Variant

Size

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

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

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

Variants

size

defaultsmlgiconicon-smicon-lg

variant

linkdefaultdestructiveoutlinesecondaryghost

buttonVariant

linkdefaultdestructiveoutlinesecondaryghost

Examples

Button Variant

Variant

Size

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

Variant

Size

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>
  )
}

Context Menu Dialog