DatePickerDemo() — ui Function Reference

Architecture documentation for the DatePickerDemo() function in date-picker-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ DatePickerDemo() — ui Function Reference

Dependency Diagram

graph TD
  c2f6290a_5b76_1128_78ea_e3d327e1ebf2["DatePickerDemo()"]
  1eb034ea_02c1_7f35_21ce_2a2a4eeee975["date-picker-demo.tsx"]
  c2f6290a_5b76_1128_78ea_e3d327e1ebf2 -->|defined in| 1eb034ea_02c1_7f35_21ce_2a2a4eeee975
  style c2f6290a_5b76_1128_78ea_e3d327e1ebf2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/date-picker-demo.tsx lines 14–39

export function DatePickerDemo() {
  const [date, setDate] = React.useState<Date>()

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          data-empty={!date}
          className="data-[empty=true]:text-muted-foreground w-[212px] justify-between text-left font-normal"
        >
          {date ? format(date, "PPP") : <span>Pick a date</span>}
          <ChevronDownIcon />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          defaultMonth={date}
        />
      </PopoverContent>
    </Popover>
  )
}