Selector de fecha

"use client"

import * as React from "react"

El selector de fechas no es una primitiva única: compone los componentes Popover y Calendar, con react-day-picker a cargo de la cuadrícula del calendario, todo con la receta neobrutalista: bordes gruesos, sombras duras y tipografía contundente.

Úsalo cuando:

• Reservas y programación — rangos de entrada y salida, huecos para citas, fechas de entrega.
• Campos de formulario — fecha de nacimiento, fechas límite, fechas de inicio; combínalo con un campo de texto para poder escribirla.
• Filtros de dashboard — selección de rangos de fechas sobre analíticas, pedidos e informes.

Instalación#

El selector de fecha se construye mediante una composición de los componentes <Popover /> y <Calendar />.

Consulta las instrucciones de instalación de los componentes Popover y Calendar.

Uso#

Copiar"use client"
 
import * as React from "react"
import { format } from "date-fns"
import { Calendar as CalendarIcon } from "lucide-react"
 
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
 
export function DatePickerDemo() {
  const [date, setDate] = React.useState<Date>()
 
  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button
            variant="outline"
            data-empty={!date}
            className="justify-start text-left font-normal data-[empty=true]:text-muted-foreground"
          />
        }
      >
        <CalendarIcon />
        {date ? format(date, "PPP") : <span>Pick a date</span>}
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar mode="single" selected={date} onSelect={setDate} />
      </PopoverContent>
    </Popover>
  )
}

Consulta la documentación de React DayPicker para obtener más información.

Composición#

Un selector de fecha se construye a partir de Popover y Calendar (no existe un componente raíz DatePicker):

CopiarPopover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Ejemplos#

Básico#

Un selector de fecha básico.

"use client"

import * as React from "react"

Selector de rango#

Un selector de fecha para elegir un rango de fechas.

"use client"

import * as React from "react"

Fecha de nacimiento#

Un selector de fecha para elegir una fecha de nacimiento. Este componente incluye una disposición de encabezado con menús desplegables para seleccionar la fecha y el mes.

"use client"

import * as React from "react"

Campo de entrada#

Un selector de fecha con un campo de entrada para elegir una fecha.

"use client"

import * as React from "react"

Selector de hora#

Un selector de fecha con un campo de entrada de hora para elegir una hora.

"use client"

import * as React from "react"

Selector en lenguaje natural#

Este componente usa la biblioteca chrono-node para analizar fechas en lenguaje natural.

"use client"

import * as React from "react"

RTL#

Para activar el soporte RTL en Neobrutalism, consulta la guía de configuración de RTL.

"use client"

import * as React from "react"

Accesibilidad#

La composición sigue el ejemplo Date Picker Dialog de WAI-ARIA: el Popover conecta el disparador con aria-expanded y aria-controls y devuelve el foco al cerrarse, mientras que react-day-picker renderiza el mes como una grid de celdas de día etiquetadas con un tabindex itinerante.

Interacciones de teclado: