PatternDisponible

Date Picker

Selector de fecha compuesto con Popover y Calendar.

Due date

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/date-picker.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import { useState } from 'react';
import { DatePicker } from '@/components/ui/date-picker';
import { Label } from '@/components/ui/label';

export default function Demo() {
  const [date, setDate] = useState<Date | undefined>();
  return (
    <div className="grid gap-2">
      <Label htmlFor="due-date">Due date</Label>
      <DatePicker
        id="due-date"
        label="Due date"
        value={date}
        onValueChange={setDate}
      />
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
value	Date or undefined	—	Selected date.
onValueChange	(date) => void	—	Required controlled update handler.
label	string	—	Accessible name for the control.
locale	DayPicker Locale	en-US	Calendar and date formatting locale.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.