Rango de fechas

Captura un rango temporal "desde / hasta" con dos SInputDate independientes, uno por cada extremo del rango.

Cuándo usarla

• Filtros de reportes, dashboards y auditorías donde el usuario elige un periodo.
• Formularios de reserva (check-in / check-out) donde cada fecha abre un calendario propio.
• Casos donde el usuario debería poder editar cada extremo sin perder el otro — un inconveniente conocido de selectionMode="range" cuando la persona quiere cambiar solo "hasta".

Decisiones de diseño

Pegado visual

Los dos inputs no se pegan. SInputDate no expone rounded, y además cada extremo tiene su propia ventana de calendario. Colócalos lado a lado con grid grid-cols-2 gap-3 o flex gap-3. Un microtítulo ("Desde" / "Hasta") encima de cada uno aclara su rol sin requerir iconos.

Forma del v-model

Recomendado: dos refs independientes from: Date | null y to: Date | null. Cada SInputDate es totalmente autónomo y se valida por su cuenta.

Alternativa: un objeto { from, to } si tu back-end espera ese formato literal. Construir el objeto en una computed al momento de enviar suele ser más limpio que mantenerlo como estado reactivo.

Coordinación del error

Cuando to < from, marca error en ambos inputs. Este es el caso más común; la regla del combo ("ambos en rojo cuando falla la relación") aplica igual que en las recetas de selector + input, aunque aquí los inputs no estén pegados.

Para errores por extremo (por ejemplo, solo "desde" está fuera de un rango permitido), marca error solo en el extremo afectado.

Etiqueta y mensaje

Una SLabel única sobre el combo con el nombre del rango ("Rango de fechas", "Periodo del reporte"). Debajo del par, un único párrafo describe el error en términos del rango ("La fecha final no puede ser anterior a la inicial") en lugar de repetirlo por input.

Accesibilidad

• Cada SInputDate lleva su propio id (range-from, range-to). Los microtítulos "Desde"/"Hasta" pueden ser <span> decorativos o <label for> si necesitas el vínculo explícito.
• Si muestras un error, añade aria-describedby en ambos inputs apuntando al párrafo de error compartido.
• Tabulación natural: from → to. Respeta el orden visual.

Variantes

• Un solo input con selectionMode="range": SInputDate nativo permite capturar el rango en un único input con un solo calendario. Es más compacto y evita la validación cruzada. Usa esa forma cuando el espacio es limitado (celdas de tabla, filtros móviles); usa esta receta cuando el usuario necesita ver y editar cada extremo por separado.
• Con atajos rápidos: agrega botones "Hoy", "Esta semana", "Este mes" encima o al lado del par que escriben ambas fechas de una vez. Ayuda a filtros de reportes.
• Fecha mínima / máxima: cada SInputDate acepta restricciones propias (minDate, maxDate). Usa el valor del otro extremo como límite dinámico (minDate: from) para evitar inversiones desde el calendario.

Relacionado

• SInputDate
• SLabel