Nexus – Elemento: Date Range

¿Qué es?

Date Range es un componente de tipo Form. Permite seleccionar un rango de fechas (fecha de inicio y fecha de fin) mediante dos selectores de calendario. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Date Range”, ambos campos vacíos).

Propiedades

Al seleccionar Date Range en el lienzo, el panel derecho muestra “Properties of DateRange” con las siguientes opciones:

• Component ID: identificador único del componente, autogenerado (ej. dtr_a1f79cb2).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
• Label: etiqueta que se muestra encima del componente (ej. “Date Range”).
• Start Date (YYYY-MM-DD): valor por defecto para la fecha de inicio, en formato Año-Mes-Día.
• End Date (YYYY-MM-DD): valor por defecto para la fecha de fin, en el mismo formato.
• Min Date: fecha mínima seleccionable (límite inferior del rango permitido).
• Max Date: fecha máxima seleccionable (límite superior del rango permitido).
• Required: casilla que marca el campo como obligatorio.
• Disabled: casilla que deshabilita el componente (queda inactivo, no editable).
• Style → Custom Class: campo para asignar una clase CSS personalizada.
• Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
• Delete Component: elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

Con Start Date y End Date se puede precargar un rango de fechas por defecto (formato YYYY-MM-DD, por ejemplo 2026-01-01). Con Min Date y Max Date se restringe el rango de fechas que el usuario puede elegir — por ejemplo, para no permitir seleccionar fechas futuras o anteriores a cierto límite. Es útil para filtrar datos por período, en combinación con componentes de tipo Data (como Table o Chart) mediante queries.