Быстрый выбор периода
Контрол «Быстрый выбор периода» позволяет указать нужный период без ввода данных, только за счет выбора элементов в открываемом всплывающем окне. Быстрый выбор периода строго ограничивает выбор до часто используемых квантов (год, полугодие, квартал и месяц) и, благодаря этому, не перегружает внимание пользователя широким функционалом.
Документация API Спецификация Axure
Режимы оформления быстрого выбора периода
С учетом поставленных задач можно применить один из режимов оформления быстрого выбора периода. Можно использовать как режим с максимально большими возможностями, где доступен выбор месяца, квартала, полугодия или года, так и режим с определенным квантом.
По умолчанию установлен режим с выбором всех возможных периодов. В опции выбора года 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>