這篇文章給大家講解如何利用 dhtmlxGantt正確保存和顯示任務(wù)的結(jié)束日期，本節(jié)將給你一個(gè)明確答案。

DhtmlxGantt正版試用下載

首先，讓我們考慮一下在處理任務(wù)日期時(shí)可能會(huì)遇到的兩種情況：

方案1

• 當(dāng)任務(wù)持續(xù)時(shí)間以天為單位測(cè)量時(shí) (duration_unit="day")
• 當(dāng)任務(wù)數(shù)據(jù)對(duì)象包含“%Y-%m-%d”或“%d-%m-%Y”格式的開(kāi)始和結(jié)束日期時(shí)（即沒(méi)有小時(shí)-分鐘部分）

由于dhtmlxGantt如何解釋和存儲(chǔ)任務(wù)結(jié)束日期的詳細(xì)信息，結(jié)果日期可能具有不期望的值。

看看下面的例子：

gantt.parse({ tasks: [
{ 
id: 1,
text: "Task 1",
start_date: "22-12-2021",
end_date: "22-12-2021"
}
]}, links:[]);
console.log(gantt.getTask(1).end_date);
// 22 December 2021 00:00:00
console.log(gantt.getTask(1).duration);
// 0

在此示例中，開(kāi)始日期和結(jié)束日期將引用相同的時(shí)間點(diǎn)，并且任務(wù)持續(xù)時(shí)間將為0。

方案2

• 當(dāng)任務(wù)的結(jié)束日期顯示在網(wǎng)格中時(shí)
• 并且結(jié)束日期的格式不包括小時(shí)-分鐘部分

  
  

gantt.config.columns = [
{name: "text", label: "Name", tree: true, width: 200, resize: true},
{name: "duration", label: "Duration", width:80, align: "center", resize: true},
{name: "start_date", label: "Start", width:80, align: "center", resize: true},
{name: "end_date", label: "Finish", width:80, align: "center", resize: true}
];
gantt.init("gantt_here");
gantt.parse({ tasks: [
{ 
id: 1,
text: "Task 1",
start_date: "02-04-2020",
end_date: "02-04-2020"
}
]}, links:[]);

在此示例中，完成日期（任務(wù)的結(jié)束日期）指定為4月3日，而任務(wù)本身在4月2日結(jié)束。

我們將在下面解釋甘特圖如何存儲(chǔ)結(jié)束日期的詳細(xì)信息。

甘特圖如何存儲(chǔ)結(jié)束日期？

即使您沒(méi)有指定任務(wù)日期的小時(shí)-分鐘部分（duration_unit = "day"），dhtmlxGantt 也始終將其保存為 JS Date，它在客戶端具有小時(shí)-分鐘-秒-毫秒部分。

結(jié)束日期的當(dāng)前格式如下：

• 日期的秒和毫秒部分始終為0，甘特圖不支持小于1分鐘的單位
• 任務(wù)的結(jié)束日期被指定為最后一個(gè)忙碌日（“日-時(shí)-分”）之后的一天的開(kāi)始（“日-時(shí)-分”）。是：

從4月2日開(kāi)始并持續(xù) 1 天的任務(wù)將具有以下開(kāi)始和結(jié)束日期："02-04-2022 00:00:00 - 03-04-2022 00:00:00"。結(jié)束日期將與4月2日之后一天的開(kāi)始日期一致

從4月2日 13:00 開(kāi)始并持續(xù) 1 小時(shí)的任務(wù)將具有以下開(kāi)始和結(jié)束日期：“02-04-2022 13:00:00 - 02-04-2022 14:00:00” . 結(jié)束日期將匹配下一小時(shí)開(kāi)始的日期

如果我們?cè)谄聊簧巷@示任務(wù)的結(jié)束日期而不設(shè)置時(shí)分部分，結(jié)果可能會(huì)產(chǎn)生誤導(dǎo)。在場(chǎng)景 2的示例中，開(kāi)始日期和結(jié)束日期將類似于“02-04-2022 - 03-04-2022”。這會(huì)讓你認(rèn)為任務(wù)持續(xù)時(shí)間不是1天，而是2天（從4月2日到3日）。

這是默認(rèn)行為，它可能會(huì)讓您感到困惑，但可以通過(guò)配置修復(fù)它。在接下來(lái)的部分中，我們將向您展示如何處理它的幾種方法。

如何更改默認(rèn)行為？

1）您不應(yīng)該首先更改存儲(chǔ)在甘特圖中的實(shí)際任務(wù)日期。

您可能還想修改加載到甘特圖中的任務(wù)日期，即將結(jié)束日期指定為 02-04-2022 23:59:59。但是你最好不要這樣做，因?yàn)檫@樣的決定可能會(huì)與任務(wù)持續(xù)時(shí)間的計(jì)算和自動(dòng)調(diào)度相沖突。

相反，我們建議您使用以下方法：

2a)要更改甘特圖中任務(wù)結(jié)束日期的格式（即在任務(wù)持續(xù)時(shí)間中包含結(jié)束日期），您可以重新定義task_end_date 模板。

讓我們以2020年4月2日開(kāi)始并持續(xù)一天的任務(wù)為例，考慮模板如何更改結(jié)束日期。

默認(rèn)情況下，此任務(wù)的結(jié)束日期應(yīng)顯示為2020年4月3日（03-04-2020 00:00:00）：

但是如果您應(yīng)用task_end_date模板，則相同的任務(wù)將在2020年4月2日完成：

代碼如下所示：

<// override the columns config
  gantt.config.columns = [
{name: "wbs", label: "#", width: 60, align: "center", template: gantt.getWBSCode},
{name: "text", label: "Name", tree: true, width: 200, resize: true},
{name: "start_date", label: "Start", width:80, align: "center", resize: true},
{name: "end_date", label: "Finish", width:80, align: "center", resize: true}, 
{name:"add"}
];
// redefine the template
gantt.templates.task_end_date = function(date){
return gantt.templates.task_date(new Date(date.valueOf() - 1)); 
};
var gridDateToStr = gantt.date.date_to_str("%Y-%m-%d");
gantt.templates.grid_date_format = function(date, column){
if(column === "end_date"){
return gridDateToStr(new Date(date.valueOf() - 1)); 
}else{
return gridDateToStr(date); 
}
}
gantt.init("gantt_here");

通過(guò)這種方式，您可以更改網(wǎng)格中顯示的任務(wù)結(jié)束日期、燈箱的標(biāo)題以及您需要顯示結(jié)束日期的任何其他位置。

 如果您正在使用任務(wù)的包含結(jié)束日期的格式并希望使其與網(wǎng)格中的內(nèi)聯(lián)編輯正常工作，則必須創(chuàng)建一個(gè)特殊的編輯器來(lái)編輯任務(wù)的包含結(jié)束日期，如下所示：

// inclusive editor for end dates
// use the default editor, but override the set_value/get_value methods
var dateEditor = gantt.config.editor_types.date;
gantt.config.editor_types.end_date = gantt.mixin({
    set_value: function(value, id, column, node){
        var correctedValue = gantt.date.add(value, -1, "day");
        return dateEditor.set_value.apply(this, [correctedValue, id, column, node]);
    },
    get_value: function(id, column, node) {
        var selectedValue = dateEditor.get_value.apply(this, [id, column, node]);
        return gantt.date.add(selectedValue, 1, "day");
    },
}, dateEditor);
 
var textEditor = {type: "text", map_to: "text"};
var startDateEditor = {type: "date", map_to: "start_date"};
var endDateEditor = {type: "end_date", map_to: "end_date"};
var durationEditor = {type: "number", map_to: "duration", min:0, max: 100};
 
gantt.config.columns = [
    {name: "text", label: "Name", tree: true, width: 200, editor: textEditor, 
        resize: true},
    {name: "duration", label: "Duration", width:80, align: "center", 
        editor: durationEditor, resize: true},
    {name: "start_date", label: "Start", width:140, align: "center", 
        editor: startDateEditor, resize: true},
    {name: "end_date", label: "Finish", width:140, align: "center", 
        editor: endDateEditor, resize: true}
];
 
// change lightbox and grid templates to display dates of tasks in an inclusive format
gantt.templates.task_end_date = function(date){
    return gantt.templates.task_date(new Date(date.valueOf() - 1)); 
};
 
var gridDateToStr = gantt.date.date_to_str("%Y-%m-%d");
gantt.templates.grid_date_format = function(date, column){
    if(column === "end_date"){
        return gridDateToStr(new Date(date.valueOf() - 1)); 
    }else{
        return gridDateToStr(date); 
    }
}

2b)如果應(yīng)用程序的其他部分要求以“包含”格式存儲(chǔ)結(jié)束日期,即從2020年4 月2日開(kāi)始并持續(xù)一天的任務(wù)需要使用start_date存儲(chǔ)：“02-04- 2022", end_date: "02-04-2022" - 您必須對(duì)結(jié)束日期進(jìn)行額外處理，即：

• 在將數(shù)據(jù)加載到甘特圖之前向結(jié)束日期添加一天
• 在將從甘特圖收到的更改保存回?cái)?shù)據(jù)存儲(chǔ)之前從結(jié)束日期中減去一天

dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表，可滿足項(xiàng)目管理控件應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫(kù)。了解更多DhtmlxGantt相關(guān)內(nèi)容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報(bào)價(jià)。

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

更多正版甘特圖軟件下載、購(gòu)買、授權(quán)咨詢，請(qǐng)點(diǎn)這里！