Gantt图表DhtmlxGantt分配资源使用教程：自定义第三方日期选择器

在DhtmlxGantt中自定义第三方日期选择器 。

在DhtmlxGantt中自定义第三方日期选择器 。

您可以通过指定任务的开始和结束日期将自定义日期选择器控件添加到灯箱以设置任务持续时间。

灯箱中的 jQuery Datepicker

例如，您可以在 jQuery UI Datepicker 的基础上创建一个 Datepicker 控件。

要在甘特图中使用 jQuery Datepicker 控件：

• 在页面上包含 jQuery 库的源文件：

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><link  rel="stylesheet" type="text/css"    href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

• 描述控制逻辑：

  (function () {    function startDatepicker(node){        return $(node).find("input[name='start']");    }    function endDateInput(node){        return $(node).find("input[name='end']");    }    gantt.form_blocks["datepicker"] = {        render: function (sns) { //sns - the section's configuration object            return "<div class='gantt-lb-datepicker'>"+                "<input type='text' name='start'>"+                "<input type='text' name='end'>"+                "</div>";;        },        set_value: function (node, value, task, section) {            //node - an html object related to the html defined above            //value - a value defined by the map_to property            //task - the task object            //section- the section's configuration object            startDatepicker(node).datepicker({                dateFormat: "yy-mm-dd",                onSelect: function (dateStr) {                    var endValue = endDateInput(node).datepicker('getDate');                    var startValue = startDatepicker(node).datepicker('getDate');                    if(startValue && endValue){                        if(endValue.valueOf() <= startValue.valueOf()){                            endDateInput(node).datepicker("setDate",                                gantt.calculateEndDate({                                    start_date: startValue, duration: 1, task:task                                })                            );                        }                    }                }            });            startDatepicker(node).datepicker("setDate", task.start_date);            endDateInput(node).datepicker({                dateFormat: "yy-mm-dd",                onSelect: function (dateStr) {                    //  gantt.ext.inlineEditors.save()                }            });            endDateInput(node).datepicker("setDate", task.end_date);        },        get_value: function (node, task, section) {            if(task.start_date && task.end_date) {                var start = startDatepicker(node).datepicker('getDate');                var end =  endDateInput(node).datepicker('getDate');                if(end.valueOf() <= start.valueOf()){                    end = gantt.calculateEndDate({                        start_date: start, duration: 1, task:task                    });                }                task.start_date = start;                task.end_date = end;                     }            task.duration = gantt.calculateDuration(task);        },        focus: function (node) {        }    }})();

• 将控件用作灯箱部分，类型为：“datepicker”：

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

灯箱中的引导日期选择器

Bootstrap Datepicker 可以像 jQuery Datepicker 一样添加到灯箱中。

要在甘特图中使用 Bootstrap Datepicker 控件：

• 在页面上包含 Bootstrap 库的源文件；
• 描述控制逻辑：

  (function () {    const startDatepicker = (node) => $(node).find("input[name='start']");    const endDateInput = (node) => $(node).find("input[name='end']");    gantt.form_blocks["datepicker"] = {        render: (sns) => {          const height = sns.height || 45;            return "<div class='gantt-lb-datepicker' style='height:" + height + "px;'>"+                        "<input type='text' name='start'> - "+                        "<input type='text' name='end'>"+                    "</div>";;        },        set_value: (node, value, task, section) => {            const datepickerConfig = {                format: 'yyyy-mm-dd',                autoclose: true,                container: gantt.$container            };            startDatepicker(node).datepicker(datepickerConfig);            startDatepicker(node).datepicker('setDate',                value value.start_date : task.start_date            );            endDateInput(node).datepicker(datepickerConfig);            endDateInput(node).datepicker('setDate',                value value.end_date : task.end_date            );            startDatepicker(node).datepicker().on('changeDate', function(e) {                const endValue = endDateInput(node).datepicker('getDate');                const startValue = startDatepicker(node).datepicker('getDate');                if (startValue && endValue) {                    if (endValue.valueOf() <= startValue.valueOf()) {                        endDateInput(node).datepicker('setDate',                            gantt.calculateEndDate({                                start_date: startValue, duration: 1, task:task                            })                        );                    }                }            });        },        get_value: (node, task, section) => {            const start = startDatepicker(node).datepicker('getDate');            let end =  endDateInput(node).datepicker('getDate');            if (end.valueOf() <= start.valueOf()) {                end = gantt.calculateEndDate({                    start_date: start,                    duration: 1,                    task:task                });            }            if (task.start_date && task.end_date) {                task.start_date = start;                task.end_date = end;                     }            task.duration = gantt.calculateDuration(task);            return {                start_date: start,                end_date: end,                duration: task.duration            };        },        focus: (node) => {        }    }})();

• 将控件用作灯箱部分，类型为：“datepicker”：

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

更多关于DhtmlxGantt教程的内容可进入官 查看。

DhtmlxGantt| 下载试用

DhtmlxGantt是针对您的解决方案的交互式JavaScript / HTML5甘特图。

标签：