本文給大家講解DHTMLX Gantt如何設置任務的持續時間，歡迎大家下載最新版試用體驗。

DHTMLX Gantt正版試用下載

一組選擇器，用于通過指定任務的開始日期和天數來設置任務持續時間，如下所示：

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

1、初始化

默認情況下，燈箱中會添加一個持續時間控件。要添加另一個，請按照以下步驟操作：

1、在燈箱配置中添加一個部分：

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

2、給部分設置標簽：

gantt.locale.labels.section_time2 = "Actual duration";

2、屬性

以下屬性最重要且通常用的時間控屬性：

name - (字符串) 部分名稱

高度- （數字）截面高度

map_to - ( string,object ) "auto" 或對象，定義將映射到該部分的數據屬性（-ies）

formatter - (object) durationFormatter對象的一個實例

type - ( string )部分控件的類型

focus - ( boolean ) 如果設置為true，該部分將專注于打開燈箱

readonly - ( boolean ) 如果設置“true”值，該部分將是只讀的

year_range - ( array,number ) 設置年份選擇器的范圍。范圍可以通過 2 種方式設置：

year_range: [2005, 2025] - 從 2005 年到 2025 年的時間段

year_range: 10 - 一個時期[當前年份 - 10 年；本年度+10年]

single_date - ( boolean ) 如果您設置“true”值，則該部分中只會顯示開始日期選擇器。已編輯的任務將僅按開始日期指定，并且持續時間為零。僅對里程碑有意義

time_format - ( string ) 設置日期時間選擇器的順序

3、配置日期和時間選擇器

要在“時間段”部分配置選擇器，請使用time_format屬性：

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

注意：time_format數組支持的選擇器是：

• "%d" - 日期選擇器
• "%m" - 月份選擇器
• "%Y" - 年份選擇器
• "%H:%i" - 時間選擇器（格式用time_picker模板設置）

您可以僅更改數組中這些成員的順序和數量，但不能更改數據表示格式。
例如，您可以更改格式，如下所示：

// time goes first
time_format:["%H:%i", "%m", "%d", "%Y"] 
// month goes first
time_format:["%m","%d", "%Y", "%H:%i"]
// the year selector is removed
time_format:["%H:%i", "%m", "%d"]
// incorrect
time_format:["%H:%i", "%M", "%d", "%Y"] //"%m" was changed to "%M"

4、映射到自定義開始/結束日期時間的屬性

默認映射

通常，通過將map_to屬性設置為“auto”值（map_to:"auto"），時間和持續時間控件被映射到強制的 'start_date'、'end_date' 數據屬性。

自定義映射

要將控件映射到某些自定義日期屬性（而不是 '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: "baseline",    height: 72, type: "duration", 
     map_to:{start_date:"planned_start",end_date:"planned_end"}} 
];

一個對象map_to有 3 個屬性：

1. start_date - 將存儲輸入中設置的開始日期的數據屬性的名稱
2. end_date - 可選，將存儲輸入中設置的結束日期的數據屬性的名稱
3. duration - 可選，將存儲由輸入定義的持續時間的數據屬性的名稱

5、切換部分可見性

如果您在配置燈箱部分時指定type:"duration_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: "duration_optional"} 
];

并為按鈕的兩種狀態設置標簽：

gantt.locale.labels.time_enable_button = 'Schedule';
gantt.locale.labels.time_disable_button = 'Unschedule';

您可以切換該部分的可見性的切換按鈕將出現在該部分附近。如果該部分是可見的，那么一切都會像指定type:"duration"一樣工作。

如果您關閉按鈕，該部分將變得不可見，但不會發生任何事情。單擊“保存”按鈕后，通過該部分的map_to屬性映射到時長控件的任務屬性的值將變為null。

gantt.getTask(1);
 
// return value
{
    id: '1', text: 'Task #1', unscheduled: true, 
    duration: 0, parent: '10',
    end_date: null, start_date: null,
    ...
}

如果您需要取消計劃任務或自定義，不應直接從 UI 顯示頁面上的基線的任務。

DHTMLX Gantt享有超十年聲譽，支持跨瀏覽器和跨平臺，性價比高，可滿足項目管理控件應用的所有需求，是最完善的甘特圖圖表庫。慧都2022年終狂歡火熱進行中，知名軟控件產品享超低折扣，滿額豪禮贈，復購雙重大禮！了解更多內容，歡迎在線咨詢或者私信我獲取正版試用版及報價。

甘特圖控件交流群：764148812    歡迎進群交流討論

慧都年終狂歡季，全場產品，限時特惠，立即了解詳情！