Интервал дат

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

Виды контролов ввода даты

Для некоторых задач время может указываться с секундами. Вводить данные можно только с клавиатуры. Для ввода даты и времени используется Controls/date:BaseInput

Вводить данные с клавиатуры или с помощью мышки — из выпадающей панели, которая открывается кликом на значок календаря, расположенный рядом с полем ввода можно с помощью Controls/date:Input

Вводить данные с клавиатуры или с помощью мышки — из выпадающей панели, которая открывается кликом на значок календаря, расположенный рядом с полями ввода периода можно с помощью Controls/dateRange:Input;

Спецификация Axure

Ввод и отображение введенного значения

  • для контролов ввода даты/времени Controls/date:BaseInput и Controls/dateRange:Input:
    • value — дата, содержит введённое значение в виде экземпляра класса Date;
  • для контрола ввода календарного периода Controls/dateRange:Input:
    • startValue, endValue — начало периода и конец периода, содержат введённое значение в виде экземпляра класса Date;
  • для всех контролов:
    • mask — определяет формат ввода и отображения значения, которое будет вводиться; это может быть дата, дата и время или только время определённого формата; контролом для ввода даты и времени Controls/date:BaseInput используется опция интерфейса IBaseInputMask, контролом Controls/dateRange:Input — опция интерфейса IDateMask;

      например:

      введённые пользователем символы 01012017 в поле с установленной маской DD.MM.YYYY будут отображены:

      введённые символы 0101121530 в поле с установленной маской DD.MM HH:mm:ss будут отображены:

Можно указать периоды без начального или конечного значения. Но в случае использования квантов у пользователя не будет доступа к полю ввода и он не сможет стереть значение.

Отображение в календаре пользовательской информации

Отображение календаря может быть разным, в зависимости от требований конечного пользователя. Пользователь должен иметь возможность устанавливать свои рабочие/выходные/праздничные дни, отображение таких дней таккже может быть различным.

Для отображения пользовательской информации в календаре используется опция source.

Она поддерживается для всех контролов, в которых используется выбор из всплывающей панели с календарем (Controls/dateRange:Input).

Источник данных, передаваемый в source, должен поддерживать навигацию по курсору. В качестве курсора устанавливается определенный год.

Источник source должен возвращать массив месяцев, в котором каждый месяц — это массив дней. Каждый день — это объект, который будет передан в шаблон дня и отображен в календаре.

По мере прокручивания ленты с месяцами дорисовывается календарь следующего года. Данные для календаря запрашиваются через source.

Пример использования можно посмотреть в демонстрационном примере к контролу Controls/dateRange:Input. В примере — это последнее поле ввода. Файл с конфигурацией источника к примеру можно посмотреть здесь.

Шаблон отображения дня в календаре

Кастомное отображение дней календаря устанавливается шаблоном отображения, с помощью опции dayTemplate.

В шаблон dayTemplate в качестве опций приходит объект value, который содержит поля:

  • day — объект Date, соответствующий дню,
  • extData — (опционально) данные, полученные через источник, переданный через опцию source (если такой источник задан).