# DateRange
<style>
    img {
        max-width: 100%;
    }
    pre {
        background-color: #F5F5F5;
        padding: .5rem;
    }
</style>

## Definición

Archivo: `induxsoft.controls.js`

Es un componente que ofrece una interfaz para elegir un rango de fechas.

<img src="/es/api/web-components/img/daterange-demo-01.jpg">

## Ejemplos

Maquetación Html
```html
<date-range hidden-input-name-start="fi" hidden-input-name-end="ff" id="dtr"></date-range>
```

**Ejemplos de uso con JavaScript**

Establecer valores al componente.
```js
function hoy() {
    const fecha = new Date();
    const yyyy = fecha.getFullYear();
    const MM = String(fecha.getMonth() + 1).padStart(2, '0');
    const dd = String(fecha.getDate()).padStart(2, '0');

    return `${yyyy}-${MM}-${dd}`;
}

function establecerDatos() {
    const dtr = document.getElementById("dtr");
    
    let obj = {
        start: hoy(),
        end: hoy()
    };

    dtr.setData(obj);
}

establecerDatos();
```

Obtener el valor actual del componente.
```js
const dtr = document.getElementById("dtr");

let data = dtr.getData();
console.log(data); // Salida Esperada: {start: 'yyyy-MM-dd', end: 'yyyy-MM-dd'}
```


<!--
## Comentarios
...
-->

## Atributos

#### hidden-input-name-start (requerido)
Nombre del elemento input que guardará el valor de la fecha inicial, el nombre sera tomado por el navegador como parte de la carga útil.

Tipo: `string`, valor predeterminado: `""`

```html
<date-range hidden-input-name-start="fi">
```

#### hidden-input-name-end (requerido)
Nombre del elemento input que guardará el valor de la fecha final, el nombre sera tomado por el navegador como parte de la carga útil.

Tipo: `string`, valor predeterminado: `""`
```html
<date-range hidden-input-name-end="ff">
```

#### start (opcional)
Fecha inicial en formato: yyyy-MM-dd, este valor sera enviado por el formulario al campo establecido en el atributo `hidden-input-name-start`.

Tipo: `date`, valor predeterminado: `""`
```html
<date-range start="0000-00-00">
```

#### end (opcional)
Fecha final en formato: yyyy-MM-dd, este valor sera enviado por el formulario al campo establecido en el atributo `hidden-input-name-end`.

Tipo: `date`, valor predeterminado: `""`
```html
<date-range end="0000-00-00">
```

#### data (opcional)
Una cadena que representa un objeto JSON con la información de fecha inicial y fecha final para inicializar el componente.

Tipo: `array`, valor predeterminado: `{}`
```html
<date-range data='{"start":"2024-01-01","end":"2024-12-31"}'>
```

#### id (opcional)
Identificador del componente, este valor puede ser usado para acceder facilmente al componente mediante javascript.

Tipo: `string`, Predeterminado: `""`
```html
<date-range id="dtr">
```

## Propiedades

- `onChanging`: (function) Permite establecer una función (callback) que sera invocada cada que se establezca un nuevo valor en el componente.


## Métodos

#### setData

Establece el valor de la fecha inicial y final

**Parámetros:**
- `array` **obj** Pares clave-valor con los datos a establecer. (requerido)

```Js
setData(obj): void
```

#### getData

Retorna un array de pares clave-valor con la información de la fecha inicial y final actual del componente.

```Js
getData(): array{}
```


<!--
## Eventos
-->