# Компонент XDateRange

Компонент содержит в себе компонент DateInput для ввода диапазона даты.

### Импорт компонента:

Компонент базовый, поэтому его использование возможно без импорта.

```javascript
import DateApplicationInput from '@components/common/data-application-input/index.vue';
```

### Описание props

1. `from` - Дата "От".
2. `to` - Дата "До".

### Шаблон

Для того, чтобы использовать компонент на странице приложения во vue, необходимо добавить его следующим образом:

```html
<date-application-input
  :from.sync="filter.from"
  :to.sync="filter.to"
  @input="startSearch"
/>
```

В примере выше данные, хранимые в `filter.from` попадут в поле ввода даты "От" компонента XDateRange, соответственно,
дата `filter.to` попадут в поле ввода даты "До" компонента XDateRange. При изменении даты, с помощью компонента
`XDateInput`, который внутри данного компонента, будет послано событие `update:from` или `update:to`, поэтому есть
возможность использовать props с модификатором `.sync` для двусторонней связи.

### События

1. `@input -> function (value)` - Событие изменения данных в полях ввода компонента, где `value` будет содержать объект:

```javascript
value = {
  from: this.from, // Дата из поля "От"
  to: this.to, // Дата из поля "До"
};
```
