InputDate
El componente InputDate permite a los usuarios seleccionar una fecha utilizando un campo de entrada de fecha. Puede manejar diferentes tipos de entrada de fecha, como fecha, mes, semana y hora, y es útil en formularios donde se requiere la selección de fechas.
Ejemplo
Importación
Para importar el componente InputDate, se puede hacer desde fenextjs
import { InputDate } from "fenextjs";Parámetros
| Parámetro | Tipo | Requerido | Default | Descripcion |
|---|---|---|---|---|
| defaultValue | Date | no | undefined | Valor predeterminado del campo de entrada de fecha. |
| value | Date | no | undefined | Valor actual del campo de entrada de fecha. Si se proporciona, anula el valor predeterminado. |
| type | TypeDate | no | 'date' | Tipo de campo de entrada. Puede ser 'date', 'month', 'week', o 'time'. |
| min | Date | no | undefined | Fecha mínima válida que se puede seleccionar. |
| max | Date | no | undefined | Fecha máxima válida que se puede seleccionar. |
| onChange | (date: Date | undefined) => void | no | undefined | Función que se ejecuta cuando la fecha seleccionada cambia. |
| classNameInputDate | string | no | '' | Clase CSS adicional para el campo de entrada de fecha. |
| icon | ReactNode | no | <SVGDate /> | Ícono que se muestra junto al campo de entrada de fecha. |
| iconPos | 'left' | 'right' | no | 'left' | Posición del ícono respecto al campo de entrada. |
| validator | FenextjsValidator | no | undefined | Validador opcional para validar la fecha ingresada. |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- Selector de fecha por defecto
<InputDate defaultValue={new Date()} onChange={(date) => console.log(date)} />- Selector de mes
<InputDate type="month" onChange={(date) => console.log(date)} />- Selector de hora
<InputDate type="time" onChange={(date) => console.log(date)} />- Selector de fecha deshabilitado
<InputDate defaultValue={new Date()} disabled={true} />