> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/data.md).

# Дата

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2F6HoYzCtF8Sy3TrL5MKxE%2Fdate.png?alt=media\&token=12a8eaf1-c31f-42e0-b237-95731e42f098)

Компонент для создания календаря.

**Свойства:**

* *<mark style="color:purple;">displayMonth</mark>* - отображаемый месяц. Значение нужно вводить в формате **ГГГГ-ММ**
* *<mark style="color:purple;">today</mark>* - выделить текущую дату. Значение нужно вводить в формате **ГГГГ-ММ-ДД**
* *<mark style="color:purple;">selectionStart</mark>* - \[<mark style="color:red;">**deprecated (v1.0.1-)**</mark>**]** выбранная дата или дата для отображения начала диапазона, если выбрано свойство *<mark style="color:purple;">selectionType</mark>* - **range**. Значение нужно вводить в формате **ГГГГ-ММ-ДД**
* *<mark style="color:purple;">selectionEnd</mark>* - \[<mark style="color:red;">**deprecated (v1.0.1-)**</mark>**]** дата для отображения конца диапазона, значение нужно вводить в формате **ГГГГ-ММ-ДД**. Не отображается, если выбрано свойство *<mark style="color:purple;">selectionType</mark>* - **single**
* *<mark style="color:purple;">selectedDates</mark>* - **\[**<mark style="color:green;">**new (v1.0.2+)**</mark>**]** массив дат формата **ГГГГ-ММ-ДД**, выбранных в календаре
* *<mark style="color:purple;">todayColor</mark>* - цвет для отображения текущей даты
* *<mark style="color:purple;">selectionColor</mark>* - цвет для отображения выбранной даты или диапазона
* *<mark style="color:purple;">monthsAmount</mark>* - количество отображаемых месяцев на одном экране
* *<mark style="color:purple;">selectionType</mark>* - тип события при клике на дату. Содержит следующие значения:
  * **single (по умолчанию)** - при клике на дату будет установлено значение *<mark style="color:purple;">selectionStart</mark>*. При повторном клике это значение поменяется
  * **range** - при клике на дату будет установлено значение *<mark style="color:purple;">selectionStart</mark>*. При повторном клике выбрано значение *<mark style="color:purple;">selectionEnd</mark>*. После выбора, все даты в диапазоне будут выделены выбранным цветом
* *<mark style="color:purple;">highlightType</mark>* - тип выделения *<mark style="color:purple;">selectionStart</mark>*. Если выбрано свойство *<mark style="color:purple;">selectionType</mark>* - **range** работать не будет. Содержит следующие значения:
  * **Day (по умолчанию)** - будет выделен только выбранный день
  * **Week** - будет выделена вся неделя на которой расположен выбранный день
  * **Month** - будет выделен весь месяц на котором расположен выбранный день

{% hint style="info" %}
Формат даты будет работать с любым разделителем, например **ГГГГ.ММ.ДД** или **ГГГГ/ММ/ДД**. Но во избежание ошибок рекомендуется использовать формат **ГГГГ-ММ-ДД**
{% endhint %}

**События:**

* *<mark style="background-color:purple;">onChange</mark>* - событие срабатывает при выборе даты и передаёт в поле **value** массив *<mark style="color:purple;">selectedDates</mark>*&#x20;
* *<mark style="background-color:purple;">onNavigate</mark>* - событие срабатывает при переключении отображаемых месяцев стрелками