Интервал дат

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

Контрол "Поле ввода даты и времени" позволяет вводить дату, время, дату и время одновременно. Для некоторых задач время может указываться с секундами. Вводить данные можно только с клавиатуры.

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

Контрол "Поле ввода даты" позволяет вводить данные с клавиатуры или с помощью мышки — из выпадающей панели, которая открывается кликом на значок календаря, расположенный рядом с полем ввода.

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

Контрол "Поле ввода периода дат" позволяет вводить данные с клавиатуры или с помощью мышки — из выпадающей панели, которая открывается кликом на значок календаря, расположенный рядом с полями ввода периода;

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

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

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

      например:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Из демонстрационного примера:

<Controls.input:Date
   value="{{_date}}"
   mask="DD.MM.YY"
   source="{{_source}}">
   <ws:dayTemplate>
      <ws:partial template="Controls/Date/MonthView/dayTemplate"
         value="{{dayTemplate.value}}" >
         <ws:contentTemplate>
            <ws:partial template="{{_dayTemplate}}" value="{{dayTemplate.value}}"/>
         </ws:contentTemplate>
      </ws:partial>
   </ws:dayTemplate>
</Controls.input:Date>
define('Controls-demo/Input/Date/Picker', [
   'UI/Base',
   'Controls-demo/Date/MonthListSource',
   'wml!Controls-demo/Input/Date/Picker',
   'wml!Controls-demo/Date/MonthListDay',
   'css!Controls-demo/Input/Date/Picker'
], function(
   Base,
   MonthListSource,
   template,
   dayTemplate
) {
   'use strict';
    
   var ModuleClass = Base.Control.extend({
      _template: template,
      _dayTemplate: dayTemplate,
      _date: new Date(2017, 0, 1, 12, 15, 30, 123),
       
      _mask: [
         'DD.MM.YYYY'
      ],
       
      _source: null,
       
      _beforeMount: function() {
         this._source = new MonthListSource();
      },
       
   });
   return ModuleClass;
});