Компактный выбор периода
Данный функционал используется для удобства выбора даты или периода в рамках короткого промежутка, например, месяца. Выбор элементов производится в диалоговом окне без ввода данных с клавиатуры.
Документация API | Спецификация Axure
Установите начальное значение периода в опции startValue и конечное значение в опции endValue.
<!-- WML -->
<Controls.compactDatePicker:View
bind:startValue="_startValue"
bind:endValue="_endValue"
/>
Диапазон доступных для выбора значений
Контролу можно задать диапазон значений, доступных пользователю, для выбора во всплывающем окне. Для этого в конфигурации контрола установите значение для опции displayedRanges.
С помощью коллбек-функции isDayAvailable пользователю можно запретить выбирать конкретные дни. Для этого следует создать собственное условие.
<!-- WML -->
<Controls.compactDatePicker:View
...
isDayAvailable="{{ _isDayAvailable }}"
/>
// TypeScript
protected _isDayAvailable(date: Date): boolean {
// Заблокируем выбор всех понедельников и четвергов
return date.getDay() !== 1 && date.getDay() !== 4;
}
Компактный выбор периода из вызывающего элемента
Календарь можно открыть с помощью клика по вызывающему элементу. Для этого необходимо установить значение compactDatePicker
для опции datePopupType. Используйте класс Controls/date:Selector для выбора одной даты, и Controls/dateRange:Selector для выбора диапазона дат.
<!-- WML -->
<Controls.dateRange:Selector
datePopupType="compactDatePicker"
/>
<!-- WML -->
<Controls.date:Selector
datePopupType="compactDatePicker"
/>