DatePickerInput() — ui Function Reference

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

Function tsx DocumentationAtlas ContentSourcing calls 2

Entity Profile

DocumentationAtlas→ ContentSourcing→ DatePickerInput() — ui Function Reference

Dependency Diagram

graph TD
  19252e06_cdf3_7d4e_41c6_f94a1f694db1["DatePickerInput()"]
  3723b541_9623_2541_4439_855e7ccfc966["date-picker-input.tsx"]
  19252e06_cdf3_7d4e_41c6_f94a1f694db1 -->|defined in| 3723b541_9623_2541_4439_855e7ccfc966
  1b97be73_e648_fb7a_82c1_66f74511efe3["formatDate()"]
  19252e06_cdf3_7d4e_41c6_f94a1f694db1 -->|calls| 1b97be73_e648_fb7a_82c1_66f74511efe3
  e236237b_6e48_c2b1_5809_81704e583acc["isValidDate()"]
  19252e06_cdf3_7d4e_41c6_f94a1f694db1 -->|calls| e236237b_6e48_c2b1_5809_81704e583acc
  style 19252e06_cdf3_7d4e_41c6_f94a1f694db1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/date-picker-input.tsx lines 38–105

export function DatePickerInput() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date | undefined>(
    new Date("2025-06-01")
  )
  const [month, setMonth] = React.useState<Date | undefined>(date)
  const [value, setValue] = React.useState(formatDate(date))

  return (
    <Field className="mx-auto w-48">
      <FieldLabel htmlFor="date-required">Subscription Date</FieldLabel>
      <InputGroup>
        <InputGroupInput
          id="date-required"
          value={value}
          placeholder="June 01, 2025"
          onChange={(e) => {
            const date = new Date(e.target.value)
            setValue(e.target.value)
            if (isValidDate(date)) {
              setDate(date)
              setMonth(date)
            }
          }}
          onKeyDown={(e) => {
            if (e.key === "ArrowDown") {
              e.preventDefault()
              setOpen(true)
            }
          }}
        />
        <InputGroupAddon align="inline-end">
          <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
              <InputGroupButton
                id="date-picker"
                variant="ghost"
                size="icon-xs"
                aria-label="Select date"
              >
                <CalendarIcon />
                <span className="sr-only">Select date</span>
              </InputGroupButton>
            </PopoverTrigger>
            <PopoverContent
              className="w-auto overflow-hidden p-0"
              align="end"
              alignOffset={-8}
              sideOffset={10}
            >
              <Calendar
                mode="single"
                selected={date}
                month={month}
                onMonthChange={setMonth}
                onSelect={(date) => {
                  setDate(date)
                  setValue(formatDate(date))
                  setOpen(false)
                }}
              />
            </PopoverContent>
          </Popover>
        </InputGroupAddon>
      </InputGroup>
    </Field>
  )
}