DataPickerWithDropdowns() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ DataPickerWithDropdowns() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/calendar-example.tsx lines 463–514

function DataPickerWithDropdowns() {
  const [date, setDate] = React.useState<Date>()
  const [open, setOpen] = React.useState(false)

  return (
    <Example title="Date Picker with Dropdowns">
      <Field className="mx-auto w-72">
        <Popover open={open} onOpenChange={setOpen}>
          <FieldLabel htmlFor="date-picker-with-dropdowns-desktop">
            Date
          </FieldLabel>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              id="date-picker-with-dropdowns-desktop"
              className="justify-start px-2.5 font-normal"
            >
              {date ? format(date, "PPP") : <span>Pick a date</span>}
              <IconPlaceholder
                lucide="ChevronDownIcon"
                tabler="IconChevronDown"
                hugeicons="ArrowDownIcon"
                phosphor="CaretDownIcon"
                remixicon="RiArrowDownSLine"
                data-icon="inline-start"
                className="ml-auto"
              />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0" align="start">
            <Calendar
              mode="single"
              selected={date}
              onSelect={setDate}
              captionLayout="dropdown"
            />
            <div className="flex gap-2 border-t p-2">
              <Button
                variant="outline"
                size="sm"
                className="w-full"
                onClick={() => setOpen(false)}
              >
                Done
              </Button>
            </div>
          </PopoverContent>
        </Popover>
      </Field>
    </Example>
  )
}