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
  872d8adf_9ffc_06e5_d65f_64b4c1af56ab["DatePickerDemo()"]
  5a7080ee_be5a_c097_5da4_a22e9ae9c2ef["date-picker-demo.tsx"]
  872d8adf_9ffc_06e5_d65f_64b4c1af56ab -->|defined in| 5a7080ee_be5a_c097_5da4_a22e9ae9c2ef
  style 872d8adf_9ffc_06e5_d65f_64b4c1af56ab fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/date-picker-demo.tsx lines 14–41

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

  return (
    <Popover>
      <PopoverTrigger
        render={
          <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 data-icon="inline-end" />
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          defaultMonth={date}
        />
      </PopoverContent>
    </Popover>
  )
}