DatePickerSimple() — ui Function Reference

Architecture documentation for the DatePickerSimple() function in calendar-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ DatePickerSimple() — ui Function Reference

Dependency Diagram

graph TD
  52e00aa9_1108_0d75_b336_25a998e8b5a8["DatePickerSimple()"]
  189fced7_34d5_a390_e619_8f0a05a614e2["calendar-example.tsx"]
  52e00aa9_1108_0d75_b336_25a998e8b5a8 -->|defined in| 189fced7_34d5_a390_e619_8f0a05a614e2
  style 52e00aa9_1108_0d75_b336_25a998e8b5a8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/calendar-example.tsx lines 375–407

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

  return (
    <Example title="Date Picker Simple">
      <Field className="mx-auto w-72">
        <FieldLabel htmlFor="date-picker-simple">Date</FieldLabel>
        <Popover>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              id="date-picker-simple"
              className="justify-start px-2.5 font-normal"
            >
              <IconPlaceholder
                lucide="CalendarIcon"
                tabler="IconCalendar"
                hugeicons="CalendarIcon"
                phosphor="CalendarBlankIcon"
                remixicon="RiCalendarLine"
                data-icon="inline-start"
              />
              {date ? format(date, "PPP") : <span>Pick a date</span>}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0" align="start">
            <Calendar mode="single" selected={date} onSelect={setDate} />
          </PopoverContent>
        </Popover>
      </Field>
    </Example>
  )
}