本文給大家講解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:"time"} 
];

1、初始化

要將時間控件添加到燈箱，請按照以下步驟操作：

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

2、屬性

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

name - (字符串) 部分名稱

高度- （數字）截面高度

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

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 ) 設置日期時間選擇器的順序

autofix_end - ( boolean ) 定義如果選擇的開始日期大于結束日期，是否會自動更正結束日期，默認為true。disabled 模式允許驗證日期，但如果您啟用該模式但不驗證日期，則當start_date大于end_date時，您可以獲得持續時間為 0 的任務。

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

要配置“持續時間”或“時間”部分的選擇器，請使用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 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: "deadline",    height: 72, type: "time", 
     map_to:{start_date:"planned_start",end_date:"planned_end"}} 
];

一個對象map_to有 3 個屬性：

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

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

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

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