Entrada de datos

InputDate

Un componente de selector de fecha con soporte para formatos personalizados, modos de seleccion y estados de error.

Tests

75%

Block

Uso

El componente SInputDate renderiza un selector de fecha. Usa v-model para vincular el valor de la fecha seleccionada. El valor del modelo es un objeto Date nativo.

Formato

Usa la prop dateFormat para controlar como se muestra la fecha en el input (ej. 'dd/mm/yy', 'mm/dd/yy', 'yy-mm-dd').

Error

Establece error en true para mostrar el input con estilo de error.

Mostrar Icono

Establece showIcon en false para ocultar el boton de calendario. Por defecto el icono se muestra.

El componente SInputDateBlock envuelve a SInputDate con una etiqueta, texto de ayuda y texto de error. Combina todas las props del componente base con label, helpText y errorText. Cuando se proporciona errorText, el estado de error se aplica automaticamente.

Props

Prop	Tipo	Default	Descripcion
`modelValue`	`Date \| Date[] \| null`	-	El valor de la fecha seleccionada (v-model)
`placeholder`	`string`	-	Texto placeholder para el input
`error`	`boolean`	`false`	Muestra estilos de error
`showIcon`	`boolean`	`true`	Muestra el boton de calendario
`id`	`string`	-	Atributo HTML id para el input
`dateFormat`	`string`	-	Formato de visualizacion de la fecha (ej. `'dd/mm/yy'`)
`selectionMode`	`'single' \| 'multiple' \| 'range'`	`'single'`	Comportamiento de seleccion
`showTime`	`boolean`	`false`	Muestra el selector de hora junto al calendario
`hourFormat`	`'12' \| '24'`	-	Formato de hora de 12 o 24 horas
`showButtonBar`	`boolean`	`false`	Muestra los botones de hoy y limpiar
`minDate`	`Date`	-	Fecha minima seleccionable
`maxDate`	`Date`	-	Fecha maxima seleccionable
`disabled`	`boolean`	`false`	Deshabilita el componente
`readonly`	`boolean`	`false`	Hace el componente de solo lectura
`manualInput`	`boolean`	-	Permite escribir una fecha en el input
`disabledDates`	`Date[]`	-	Arreglo de fechas a deshabilitar
`numberOfMonths`	`number`	`1`	Numero de meses a mostrar
`showWeek`	`boolean`	`false`	Muestra los numeros de semana
`class`	`string`	-	Clases CSS adicionales

Eventos

Evento	Payload	Descripcion
`update:modelValue`	`Date \| Date[] \| null`	Se emite cuando la fecha seleccionada cambia

Editar esta páginaoReportar un problema

InputAmount

Un input numerico con soporte de monedas, formateo automatico, simbolos y seleccion de multiples monedas.

InputIncrement

Un componente de entrada numerica con botones de incremento y decremento, con soporte para limites minimo y maximo.