Un campo de entrada que actúa como disparador para un selector de calendario, permitiendo elegir fechas de forma visual y accesible.
DatePickerInput · Popover · Calendar
Importa los estilos base y los componentes necesarios.
1import 'nave-ui-library/styles.css'2import { DatePickerInput, Popover, PopoverTrigger, PopoverContent, Calendar } from 'nave-ui-library/react'Haz clic en el input para abrir el calendario. El DatePickerInput debe envolverse en un Popover para funcionar como selector.
Soporta estados de error y deshabilitado, afectando borde y opacidad del icono.
Al igual que el resto de los controles, ofrece variantes small y medium.
Props disponibles para DatePickerInput.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Etiqueta superior del campo. |
placeholder | string | — | Texto del placeholder. |
value | string | — | Valor mostrado en el input. |
defaultValue | string | — | Valor inicial no controlado. |
size | "small" | "medium" | "medium" | Tamaño del campo. |
error | boolean | false | Activa el estilo de error. |
helperText | string | — | Texto de ayuda debajo del campo. |
disabled | boolean | false | Deshabilita el campo. |
1{2 "name": "Input",3 "description": "Campo de entrada de texto con soporte para estados y validación.",4 "component": "Input",5 "files": [6 "components/base/data-entry/inputs/Input.tsx"7 ],8 "dependencies": [9 "react",10 "class-variance-authority"11 ],12 "void": true,13 "props": {14 "size": {15 "type": "'small' | 'medium'",16 "description": "Size of the input."17 },18 "error": {19 "type": "boolean",20 "description": "Whether the input has an error."21 },22 "helperText": {23 "type": "string",24 "description": "Helper text for the input."25 },26 "label": {27 "type": "string",28 "description": "Label for the input."29 },30 "placeholder": {31 "type": "string",32 "description": "Placeholder text for the input."33 },34 "disabled": {35 "type": "boolean",36 "description": "Whether the input is disabled."37 }38 }39}