Управление временем

Эта функция включает пару селекторов, которые позволяют установить продолжительность задачи, выбрав даты её начала и окончания.

gantt.config.lightbox.sections=[
    {name:"description", height:70, map_to:"text", type:"textarea", focus:true},
    {name:"time",        height:72, map_to:"auto", type:"time"} ];

Related sample: Time control

Инициализация

Чтобы включить контрол time в лайтбокс, выполните следующие действия:

1) Добавьте секцию в конфигурацию лайтбокса:

gantt.config.lightbox.sections=[
    {name:"description", height:70, map_to:"text", type:"textarea",focus:true},
    {name:"period",      height:72, map_to:"auto", type:"time"}, ];

2) Назначьте метку для секции:

gantt.locale.labels.section_period = "Период времени";

Свойства

Вот самые важные и часто используемые свойства для контрола 'time' (полный список можно найти здесь):

name - (string) имя секции
height - (number) высота секции
map_to - (string,object) "auto" или объект, определяет свойство(а) данных, связанные с секцией
type - (string) тип контрола секции
focus - (boolean) если true, секция получает фокус при открытии лайтбокса
readonly - (boolean) если true, секция становится доступной только для чтения
year_range - (array,number) устанавливает диапазон для селектора года. Можно настроить двумя способами:
- year_range: [2005, 2025] - определяет диапазон с 2005 по 2025 год
- year_range: 10 - определяет диапазон [текущий год - 10 лет; текущий год + 10 лет]
single_date - (boolean) если true, отображается только селектор start Date. Задачи, отредактированные таким образом, будут иметь только дату начала и нулевую продолжительность, что полезно для вех
time_format - (string) определяет порядок селекторов даты-времени
autofix_end - (boolean) контролирует автоматическую корректировку даты окончания, если выбранная дата начала позже даты окончания. Включено по умолчанию (true). Отключение позволяет использовать валидацию даты, но если она не будет выполнена, могут возникнуть задачи с нулевой продолжительностью, если дата начала позже даты окончания.

Настройка селекторов даты-времени

Чтобы настроить селекторы для секции "duration" или "time", используйте свойство time_format (см. Спецификация Формата Даты):

Добавление селектора времени в секцию 'Период времени'

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"time",type:"time", map_to:"auto", time_format:["%d","%m","%Y","%H:%i"]}];

Массив time_format позволяет использовать следующие элементы:

"%d" - селектор дня
"%m" - селектор месяца
"%Y" - селектор года
"%H:%i" - селектор времени (формат устанавливается с помощью шаблона time_picker)

Вы можете изменить расположение или уменьшить количество этих элементов в массиве, но не можете изменять формат представления данных.
Например:

// время идет первым
time_format:["%H:%i", "%m", "%d", "%Y"] 
// месяц идет первым
time_format:["%m","%d", "%Y", "%H:%i"]
// удаление селектора года
time_format:["%H:%i", "%m", "%d"]
// неправильный формат
time_format:["%H:%i", "%M", "%d", "%Y"] // "%m" заменено на "%M"

Связывание с пользовательскими свойствами даты-времени начала/окончания

Стандартное связывание

Обычно контролы времени и продолжительности связаны с обязательными свойствами 'start_date' и 'end_date' путем установки map_to на "auto" (map_to:"auto").

Пользовательское связывание

Для использования пользовательских свойств даты вместо 'start_date' и 'end_date', используйте объектную нотацию для map_to:

gantt.config.lightbox.sections = [
    {name: "description", height: 72, type: "textarea", map_to:"text", focus: true},
    {name: "time",        height: 72, type: "duration", map_to:"auto"},
    {name: "deadline",    height: 72, type: "time",      map_to:{start_date:"planned_start",end_date:"planned_end"}} ];

Related sample: Displaying deadlines

Когда используется как объект, map_to включает 3 свойства:

start_date - свойство данных для ввода даты начала
end_date - опционально, свойство данных для ввода даты окончания
duration - опционально, свойство данных для ввода продолжительности

Если свойство не указано, контрол использует соответствующее обязательное свойство даты.

Переключение видимости секции

Вы можете переключать видимость секции времени, установив type:"time_optional" и button: true в конфигурации лайтбокса:

gantt.config.lightbox.sections = [
  {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
  {name: "time", map_to: "auto", button: true, type: "time_optional"} ];

Затем задайте метки для двух состояний кнопки:

gantt.locale.labels.time_enable_button = 'Запланировать';
gantt.locale.labels.time_disable_button = 'Отменить планирование';

Рядом с секцией появится кнопка-переключатель, позволяющая показывать или скрывать её. Если секция видима, она ведет себя как type:"time".

Если вы выключите кнопку, секция исчезнет, но ничего не изменится немедленно. Когда будет нажата кнопка "Сохранить", свойства задачи, связанные с контролем времени через map_to, будут установлены в null.

gantt.getTask(1);
 
// возвращаемое значение
{
    id: '1', text: 'Task #1', unscheduled: true, 
    duration: 0, parent: '10',
    end_date: null, start_date: null,
    ...
}

Эта функция полезна для создания незапланированных задач. Ознакомьтесь с этим примером:

К началу