Date Picker

Import

import { Calendar } from "@timelycare/helix-ui"
import { Popover, PopoverContent, PopoverTrigger } from "@timelycare/helix-ui"
import { Button } from "@timelycare/helix-ui"
import { CalendarIcon } from "lucide-react"

Props

interface DatePickerProps {
  date?: Date
  onSelect?: (date: Date | undefined) => void
  disabled?: boolean
  placeholder?: string
  className?: string
}

type DatePickerType = "icon-left" | "icon-right" | "with-input"

Design Tokens

Trigger/Input

With Input Type

Typography

Label & Description

Types

Choosing a Type

• Use icon-left as the default for most forms
• Use icon-right when right-aligned icons fit the layout better
• Use with-input when users need to type dates directly

States

Icons

Size: size-4 (16px × 16px) Color: text-foreground (#09090b) With Input button icon: h-3.5 w-3.5 (14px)

<CalendarIcon className="size-4 text-foreground" />

Common Patterns

Basic Date Picker

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline" className="w-[240px] justify-start text-left font-normal">
      <CalendarIcon className="mr-2 h-4 w-4" />
      {date ? format(date, "PPP") : <span className="text-muted-foreground">Pick a date</span>}
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0">
    <Calendar mode="single" selected={date} onSelect={setDate} />
  </PopoverContent>
</Popover>

Date with Time

<div className="flex gap-2">
  <DatePicker date={date} onSelect={setDate} />
  <Input type="time" value={time} onChange={setTime} className="w-[120px]" />
</div>

Date Range

<div className="flex flex-col gap-2">
  <DatePicker placeholder="Start date" />
  <DatePicker placeholder="End date" />
</div>

Form Field with Label

<div className="space-y-2">
  <Label>Date of birth</Label>
  <DatePicker date={dob} onSelect={setDob} />
</div>

Accessibility

• Composition of Radix Popover + Calendar — inherits both components' a11y
• Keyboard: Enter/Space to open popover, Arrow keys to navigate dates, Escape to close
• Screen reader: announces selected date value
• Requires label association via wrapping Form field or aria-label

Gotchas

See Also

• Related Components: Calendar (date selection), Form (form integration), Popover (container)
• Accessibility: Forms Accessibility — Date input ARIA patterns

Last updated: February 9, 2026