Компактный выбор периода

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

Документация 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"
/>