本文給大家講解DHTMLX Gantt如何對時(shí)間進(jìn)行控制，歡迎大家下載最新版試用體驗(yàn)！

DHTMLX Gantt正版試用下載

一對選擇器，用于通過指定任務(wù)的開始和結(jié)束日期來設(shè)置任務(wù)持續(xù)時(shí)間，如下所示：

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、初始化

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

1、在燈箱配置中添加一個(gè)部分：

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、給部分設(shè)置標(biāo)簽：

gantt.locale.labels.section_period = "Time period";

2、屬性

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

name - (字符串) 部分名稱

高度- （數(shù)字）截面高度

map_to - ( string,object ) "auto" 或?qū)ο螅x將映射到該部分的數(shù)據(jù)屬性（-ies）

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

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

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

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

year_range: [2005, 2025] - 從 2005 年到 2025 年的時(shí)間段

year_range: 10 - 一個(gè)時(shí)期[當(dāng)前年份 - 10 年；本年度+10年]

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

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

autofix_end - ( boolean ) 定義如果選擇的開始日期大于結(jié)束日期，是否會(huì)自動(dòng)更正結(jié)束日期，默認(rèn)為true。disabled 模式允許驗(yàn)證日期，但如果您啟用該模式但不驗(yàn)證日期，則當(dāng)start_date大于end_date時(shí)，您可以獲得持續(xù)時(shí)間為 0 的任務(wù)。

3、配置日期和時(shí)間選擇器

要配置“持續(xù)時(shí)間”或“時(shí)間”部分的選擇器，請使用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數(shù)組支持的選擇器是：

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

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

// 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、映射到自定義開始/結(jié)束日期時(shí)間屬性

默認(rèn)映射

通常，通過將map_to屬性設(shè)置為“auto”值（map_to:"auto"），時(shí)間和持續(xù)時(shí)間控件被映射到強(qiáng)制的 'start_date'、'end_date' 數(shù)據(jù)屬性。

自定義映射

要將控件映射到某些自定義日期屬性（而不是 '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"}} 
];

一個(gè)對象map_to有 3 個(gè)屬性：

1. start_date - 將存儲(chǔ)輸入中設(shè)置的開始日期的數(shù)據(jù)屬性的名稱
2. end_date - 可選，將存儲(chǔ)輸入中設(shè)置的結(jié)束日期的數(shù)據(jù)屬性的名稱
3. duration - 可選，將存儲(chǔ)由輸入定義的持續(xù)時(shí)間的數(shù)據(jù)屬性的名稱

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

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

慧都年終狂歡季，全場產(chǎn)品，限時(shí)特惠，立即了解詳情！