Date Picker

Selector de fechas basado en Ark UI Date Picker. El <DatePicker /> incluido ofrece etiqueta, input, disparador del calendario y un panel placeholder dentro de DatePickerContent: debes sustituir ese contenido por las vistas de calendario que necesites (por ejemplo cuadrícula mensual y navegación) usando las partes que exporta Ark.

import { DatePicker } from "@/components/ui/date-picker";

export default function Example() {
  return <DatePicker label="Fecha" placeholder="Elige una fecha" />;
}

Instalación

liminal add date-picker

Uso

label y placeholder son opcionales. El resto de props se reenvían a DatePickerRoot (DatePicker.Root de Ark): locale, modo de selección, value / onValueChange, etc., según la documentación de Ark.

El contenido por defecto del popover es solo una pista para componer el calendario; sustitúyelo por DatePickerView* / DatePickerTable / etc. como en los ejemplos de Ark Date Picker.

Ejemplos

API compuesta

Estas partes se reexportan desde @/components/ui/date-picker: DatePickerRoot, DatePickerLabel, DatePickerControl, DatePickerInput, DatePickerTrigger, DatePickerPositioner, DatePickerContent. Compón el calendario dentro de DatePickerContent para un selector completo.

import {
  DatePickerRoot,
  DatePickerLabel,
  DatePickerControl,
  DatePickerInput,
  DatePickerTrigger,
  DatePickerContent,
} from "@/components/ui/date-picker";

export default function Example() {
  return (
    <DatePickerRoot>
      <DatePickerLabel>Fecha</DatePickerLabel>
      <DatePickerControl>
        <DatePickerInput placeholder="Elige una fecha" />
        <DatePickerTrigger aria-label="Abrir calendario" />
      </DatePickerControl>
      <DatePickerContent>
        {/* Añade DatePicker.View, DatePicker.Table, etc. según Ark */}
      </DatePickerContent>
    </DatePickerRoot>
  );
}

API

También acepta todas las props de DatePicker.Root de Ark (por ejemplo selectionMode, locale, value, onValueChange). Ver Ark Date Picker.