DatePickerSimple() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ DatePickerSimple() — ui Function Reference

Dependency Diagram

graph TD
  1754b9d6_184f_3923_68ea_a2207674407f["DatePickerSimple()"]
  56746db4_bde3_b797_f7fa_14d8b5e6af22["calendar-example.tsx"]
  1754b9d6_184f_3923_68ea_a2207674407f -->|defined in| 56746db4_bde3_b797_f7fa_14d8b5e6af22
  style 1754b9d6_184f_3923_68ea_a2207674407f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/calendar-example.tsx lines 375–409

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
            render={
              <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>}
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0" align="start">
            <Calendar mode="single" selected={date} onSelect={setDate} />
          </PopoverContent>
        </Popover>
      </Field>
    </Example>
  )
}