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
  3a6260c3_d06d_7fc6_0ca1_06c3dd4bff62["DatePickerInput()"]
  a8bd93df_e193_1f92_f51f_7e69ae32c600["date-picker-input.tsx"]
  3a6260c3_d06d_7fc6_0ca1_06c3dd4bff62 -->|defined in| a8bd93df_e193_1f92_f51f_7e69ae32c600
  3a7dee52_d8b6_6acc_f684_e63c2452a197["formatDate()"]
  3a6260c3_d06d_7fc6_0ca1_06c3dd4bff62 -->|calls| 3a7dee52_d8b6_6acc_f684_e63c2452a197
  98700289_1caa_4290_4bb3_848d220fb0ea["isValidDate()"]
  3a6260c3_d06d_7fc6_0ca1_06c3dd4bff62 -->|calls| 98700289_1caa_4290_4bb3_848d220fb0ea
  style 3a6260c3_d06d_7fc6_0ca1_06c3dd4bff62 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/date-picker-input.tsx lines 38–107

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
              render={
                <InputGroupButton
                  id="date-picker"
                  variant="ghost"
                  size="icon-xs"
                  aria-label="Select date"
                />
              }
            >
              <CalendarIcon />
              <span className="sr-only">Select date</span>
            </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>
  )
}