# Date Range

## <mark style="color:blue;">Когда использовать</mark>

Используйте Date Range для выбора периода дат.

## <mark style="color:blue;">Описание работы</mark>

После активации поля (кликом на форму ввода или кнопку-иконку календаря) пользователь может ввести период с клавиатуры или выбрать во всплывающем меню - компонент Calendar Range, где начало периода левый календарь, окончание периода - правый.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FGcCHNRHxOwrl0ZngFeCJ%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-02-26%20%D0%B2%2012.40.22.png?alt=media&#x26;token=d9314382-c4ba-405f-abcc-de03b544160e" alt=""><figcaption></figcaption></figure>

### Выбор через всплывающее меню (Calendar Range) <a href="#vybor-daty" id="vybor-daty"></a>

Даты можно выбирать в любом порядке, либо с начала периода, либо - с окончания. После выбора второго числа, календарь закрывается, а выбранные даты применяются и высвечиваются в инпуте.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FzbRFiJvzROlryXUzjSpp%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-02-26%20%D0%B2%2012.42.00.png?alt=media&#x26;token=225ae843-d446-450a-8bb5-6044c77ad940" alt=""><figcaption></figcaption></figure>

При клике два раза на одно и тоже число, календарь закроется и применится период из одного дня:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FhOZr0fNSROq4RP0buBiA%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-02-26%20%D0%B2%2013.04.01.png?alt=media&#x26;token=b36347fb-9bd5-454d-b5f2-956786314a36" alt=""><figcaption></figcaption></figure>

Дата начала и дата окончания могут быть выбраны пользователем в любом из представленных календарей. При закрытии календаря даты будут автоматически расставлены в логическом порядке:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Ffj1Lpf2p6zdplcn5qRVR%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-02-26%20%D0%B2%2018.09.56.png?alt=media&#x26;token=a779bdf9-24b8-4886-b0d7-25e30df6e796" alt=""><figcaption></figcaption></figure>

### Редактирование через всплывающее меню (Calendar Range) <a href="#vybor-daty" id="vybor-daty"></a>

Если в календаре был выбран период один день (дата начала равна дате окончания) или два любых других дня, то при выборе новой даты, предыдущий выбор автоматически спадает:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fb1pArXvDodipk5DDCrkH%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-02-26%20%D0%B2%2018.23.50.png?alt=media&#x26;token=7e87ac3f-91f8-4ed9-a122-43fd1a64d875" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Для разработчиков.** Данные подтягиваются в инпут после закрытия дропдауна с календарем
{% endhint %}
