Быстрый выбор периода

Контрол «Быстрый выбор периода» позволяет указать нужный период без ввода данных, только за счет выбора элементов в открываемом всплывающем окне. Быстрый выбор периода строго ограничивает выбор до часто используемых квантов (год, полугодие, квартал и месяц) и, благодаря этому, не перегружает внимание пользователя широким функционалом.

Документация API Спецификация Axure

Диапазон доступных для выбора значений

Контролу можно задать диапазон значений, которые пользователь может выбирать во всплывающем окне. Для этого в конфигурации контрола установите значение в опции displayedRanges.

<!-- WML -->
<Controls.dateRange:RangeShortSelector
    displayedRanges="{{_displayedRanges}}"
    prevArrowVisibility="{{true}}"
    nextArrowVisibility="{{true}}"
    bind:startValue="_startValue"
    bind:endValue="_endValue"/>

// TypeScript
protected _displayedRanges = [[new Date(2018, 0), new Date(2022, 0)], [new Date(2025, 0), new Date(2030, 0)]];
protected _displayedRanges1 = [[new Date(2020, 0), new Date(2021, 1)]];
protected _startValue: Date = new Date(2019, 1);
protected _endValue: Date = new Date(2019, 2, 0);

Шаблон отображения месяца

Для отображения месяца во всплывающем окне по умолчанию используется базовый шаблон Controls/shortDatePicker:MonthTemplate. Пользовательский шаблон получается путем конфигурации базового шаблона. Для установки пользовательского шаблона необходимо задать значение в опции monthTemplate в классе Controls/shortDatePicker:View.

Ниже приведен пример установки пользовательского шаблона и передачи в него параметра iconTemplate.

<!-- WML -->
<Controls.shortDatePicker:View
        source="{{_source}}">
    <ws:monthTemplate>
        <ws:partial template="Controls/shortDatePicker:MonthTemplate">
            <ws:iconTemplate>
                <ws:if data="{{iconTemplate.extData}}">
                    <div class="controls-PeriodLiteDialog-item__checkBox" title="{[Месяц закрыт]}">
                        <div class="icon-16 icon-Yes icon-done"></div>
                    </div>
                </ws:if>
                <ws:else data="{{iconTemplate.extData === 0}}">
                    <div class="controls-PeriodLiteDialog-item__checkBox" title="{[Месяц не закрыт]}">
                        <div class="icon-16 icon-Yes icon-disabled"></div>
                    </div>
                </ws:else>
            </ws:iconTemplate>
        </ws:partial>
    </ws:monthTemplate>
</Controls.shortDatePicker:View>