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

Пара элементов управления для задания продолжительности задачи путём указания даты начала и даты окончания задачи.

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

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

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

Чтобы добавить элемент управления time в lightbox, выполните ниже указанные шаги:

1. Добавьте раздел в конфигурацию lightbox:

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 period";

Свойства

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

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

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

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

Добавление селектора времени в раздел 'Time period'

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"}} /*!*/
];

Отображение дедлайнов

Как объект, у map_to три свойства:

1. start_date- название свойства данных, которое будет хранить начальную дату, установленную во вводе
2. end_date - необязательное, название свойства данных, которое будет хранить конечную дату, установленную во вводе
3. duration - необязательное, название свойства данных, которое будет хранить продолжительность, заданную во вводе

заметка

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

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

Можно управлять видимостью времени раздела, если указать type:"time_optional" и button: true при настройке раздела для lightbox:

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 = 'Schedule';
gantt.locale.labels.time_disable_button = 'Unschedule';

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

Если переключить кнопку в выключенное состояние, раздел станет невидимым, но ничего не произойдёт. После нажатия кнопки "Save" значения свойств задачи, сопоставленных с элементом управления временем через свойство map_to раздела, станут null.

gantt.getTask(1);

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

Эта функциональность может быть полезной, если вам нужно сделать задачу незапланированной. См. соответствующий пример:

Связанный пример [Незапланированные задачи]