FormDatePickerDemo() — ui Function Reference

Architecture documentation for the FormDatePickerDemo() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ FormDatePickerDemo() — ui Function Reference

Dependency Diagram

graph TD
  a7608f46_2451_20d1_e9f0_c79cd16a1651["FormDatePickerDemo()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  a7608f46_2451_20d1_e9f0_c79cd16a1651 -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style a7608f46_2451_20d1_e9f0_c79cd16a1651 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 2891–3132

export function FormDatePickerDemo() {
  const [date, setDate] = useState<Date>()
  const [birthDate, setBirthDate] = useState<Date>()
  const [appointmentDate, setAppointmentDate] = useState<Date>()
  const [dateRange, setDateRange] = useState<DateRange | undefined>()
  const [vacationDates, setVacationDates] = useState<DateRange | undefined>({
    from: new Date(),
    to: addDays(new Date(), 7),
  })

  return (
    <Card>
      <CardHeader>
        <CardTitle>Date Picker Fields</CardTitle>
        <CardDescription>Different date picker configurations</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field data-invalid={true}>
            <FieldLabel htmlFor="basic-date-6st">Select Date</FieldLabel>
            <Popover>
              <PopoverTrigger asChild>
                <Button
                  id="basic-date-6st"
                  variant="outline"
                  aria-invalid={true}
                  className={cn(
                    "w-full justify-start text-left font-normal",
                    !date && "text-muted-foreground"
                  )}
                >
                  <CalendarIcon />
                  {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>
          <Field>
            <FieldLabel htmlFor="birth-date-0fq">Date of Birth</FieldLabel>
            <Popover>
              <PopoverTrigger asChild>
                <Button
                  id="birth-date-0fq"
                  variant="outline"
                  className={cn(
                    "w-full justify-start text-left font-normal",
                    !birthDate && "text-muted-foreground"
                  )}
                >
                  <CalendarIcon />
                  {birthDate ? (
                    format(birthDate, "PPP")
                  ) : (
                    <span>Select your birth date</span>
                  )}
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0" align="start">
                <Calendar
                  mode="single"
                  selected={birthDate}
                  onSelect={setBirthDate}
                />
              </PopoverContent>
            </Popover>
            <FieldDescription>
              We use this to calculate your age and provide age-appropriate
              content.
            </FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="appointment-f44">Appointment Date</FieldLabel>
            <FieldDescription>
              Select a date for your appointment (weekdays only).
            </FieldDescription>
            <Popover>
              <PopoverTrigger asChild>
                <Button