FilterDateRange

# FilterDateRange ## Definición Archivo: `induxsoft.controls.js` Es un componente que ofrece tres distintas interfaces configurables para elegir un rango de fechas. - Por año y mes (month). - últimos días (lastdays) - Rango específico (range)

## Ejemplos Maquetación HTML básica ```html FilterDateRange ``` El atributo `selection`, permite establecer la selección del rango de fechas al momento que el componente es renderizado, usualmente estos valores se establecerán desde el back-end, ya sea de forma predeterminada o bien, como resultado de la aplicación de los parámetros enviados por el propio componente en una solicitud previa. Por otro lado, obserque que la lista de años puede establecerse mediante el atributo `years-option`, de forma predeterminada los años listados seran -3 años y +3 años al actual. ```html FilterDateRange ``` Este es un ejemplo con todos los atributos que pueden establecerse. ```html ``` ## Comentarios El componente envía como parte de la carga útil del formulario al que está relacionado la información del rango de fechas con base en el modo de selección que haya usado el usuario para establecerla. Los valores enviados por el formulario como campos corresponden a los que estén establecidos en los atributos: - ```mode-field```. Valor predeterminado ```mode```, siempre se envía y puede ser alguno de los siguientes: ```month```, ```lastdays``` o ```range``` **Si el componente está en modo de selección por año y mes** - ```year-field```. Valor predeterminado ```year```, contendrá el valor correspondiente al año seleccionado. - ```month-field```. Valor predeterminado ```month```, contendrá el valor correspondiente al mes seleccionado (1-12) **Si el componente está en modo de selección por últimos días** - ```range-field```. Valor predeterminado ```range```, contendrá el valor correspondiente a la cantidad de días anteriores a la fecha actual elegidos **Si el componente está en modo de selección por rango de fechas** - ```from-field```. Valor predeterminado ```from```, contendrá el valor de la fecha inicial seleccionada en la forma ```yyyy-mm-dd``` - ```to-field```. Valor predeterminado ```to```, contendrá el valor de la fecha final seleccionada en la forma ```yyyy-mm-dd``` **Ejemplos de datos enviados** El siguiente conjunto de ejemplos ilustra los campos enviados por el formulario al backend según la selección del usuario: Modo de selección: Año y Mes (month) ``` mode=month year=2024 month=12 ``` Modo de selección: Últimos días (lastdays) ``` mode=lastdays range=30 ``` Modo de selección: Personalizado (range) ``` mode=range from=2024-01-01 to=2024-12-31 ``` ## Atributos #### form (opcional) Selector del formulario al que se realizará el submit (Si no se establece se busca el formulario más cercano). Este atributo únicamente tiene efecto si también se ha establecido el atributo ```auto-sumbit="true"``` Tipo: `string`, Predeterminado: `""` ```html ``` #### auto-submit (opcional) Establece si el formulario vinculado se envía cuando el componente detecta un cambio en sus valores. Tipo: `boolean`, Predeterminado: `false` ```html ``` #### custom-range (opcional) Establece si la opción para rango de fechas personalizado se mostrara disponible. Tipo: `boolean`, Predeterminado: `false` ```html ``` #### selection (opcional) Una cadena que representa un objeto JSON con la información para inicializar el componente al momento de su renderización. Tipo: `array`, Predeterminado: `{}` ```html

``` #### mode-field (opcional) Estable el nombre del campo que se usara para determinar el modo de filtro seleccionado. Tipo: `string`, Predeterminado: `mode` ```html ``` #### year-field (opcional) Establece el nombre del campo que se usara para determinar el año seleccionado. Tipo: `string`, Predeterminado: `year` ```html ``` #### month-field (opcional) Establece el nombre del campo que se usara para determinar el mes seleccionado. Tipo: `string`, Predeterminado: `month` ```html ``` #### range-field (opcional) Estable el nombre del campo que se usara para determinar el rango de días seleccionado. Tipo: `string`, Predeterminado: `range` ```html ``` #### from-field (opcional) Establece el nombre del campo que se usara para determinar el valor de la fecha de inicio seleccionado. Tipo:`string`, Predeterminado: `from` ```html ``` #### to-field (opcional) Establece el nombre del campo que se usara para determinar el valor de la fecha final seleccionada. Tipo:`string`, Predeterminado: `to` ```html ``` #### lastdays-options (opcional) Cadena con lista de valores numéricos separados por comas (,) que se usaran para llenar las opciones de **últimos días**. Tipo: `string`, Predeterminado: `""` ```html ``` #### years-options (opcional) Cadena con lista de valores numéricos separados por comas (,) que se usaran para llenar las opciones de los **años**. Tipo: `string`, Predeterminado: `""` ```html ``` #### month-names (opcional) Lista de subcadenas separadas por comas (,) que se usaran como texto visible para las opciones de los **meses**. Tipo: `string`, Predeterminado: `Enero,Febrero,Marzo,Abril,Mayo,Junio,Julio,Agosto,Septiembre,Octubre,Noviembre,Diciembre` ```html ``` #### label-months (opcional) Texto a mostrar para la opción de filtro por año-mes. Tipo: `string`, Predeterminado: `Por mes` ```html ``` #### label-days (opcional) Texto a mostrar para la opción de filtro de los últimos días. Tipo: `string`, Predeterminado: `Últ. @lastdays días`, la macro `@lastdays` sera reemplazado por cada uno de los valores definidos en `lastdays-options`. ```html ``` #### label-custom (opcional) Texto a mostrar para la opción de filtro por rango de fechas personalizado. Tipo: `string`, Predeterminado: `Personalizado` ```html ``` #### label-from (opcional) Texto a mostrar para el campo de fecha inicial cuando la opción de filtro es **Personalizado** Tipo: `string`, Predeterminado: `Desde:` ```html ``` #### label-to (opcional) Texto a mostrar para el campo de fecha final cuando la opción de filtro es **Personalizado** Tipo: `string`, Predeterminado: `Hasta:` ```html ```