Дата и диапазон дат

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

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

Для ввода даты и времени, с различным форматом отображения, используется:

Controls/input:DateBase — поле ввода, позволяющее вводить дату, время, дату и время одновременно; для особых задач время может указываться с секундами; вводить данные можно только с клавиатуры:

Для ввода даты с возможностью выбора из выпадающей панели используется:

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

Для ввода календарного периода используется:

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

Демонстрационный пример

Работу контролов можно посмотреть на интерактивных демонстрационных примерах:

Описание конфигурирования контролов иллюстрируется фрагментами кода, взятыми из демонстрационных примеров.

Справочные материалы и ресурсы

Руководство разработчика

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

  • для контролов ввода даты/времени 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 будут отображены:

Из демонстрационных примеров:

  • контрол ввода даты:

    var ModuleClass = BaseControl.extend({
       _date: new Date(2017, 0, 1, 12, 15, 30, 123),
       _mask: 'DD.MM.YYYY',
       ...
    });

    <Controls.input:Date
       value="{{_date}}"
       mask="{{_mask}}"
       />

  • контрол ввода календарного периода

    var ModuleClass = BaseControl.extend({
       _startDate: new Date(2017, 0, 1, 12, 15, 30, 123),
       _endDate: new Date(2017, 0, 2, 12, 15, 30, 123),
       _mask: 'DD.MM.YYYY',
       ...
    });

    <Controls.dateRange:Input
       bind:startValue="_startDate"
       bind:endValue="_endDate"
       mask="{{mask}}"
    />

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

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

Для отображения пользовательской информации в календаре используется опция 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;
});