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

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

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

Режимы оформления быстрого выбора периода

С учетом поставленных задач можно применить один из режимов оформления быстрого выбора периода. Можно использовать как режим с максимально большими возможностями, где доступен выбор месяца, квартала, полугодия или года, так и режим с определенным квантом.

Документация API

По умолчанию установлен режим с выбором всех возможных периодов. В опции выбора года chooseYears, полугодия chooseHalfyears, квартала chooseQuarters и месяца chooseMonths указано значение true. Для изменения режима выбора периода необходимо отключить лишние опции, указав им значение false.

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

Контролу можно задать диапазон значений, которые пользователь может выбирать во всплывающем окне. Для этого в конфигурации контрола установите значение в опции 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>