彩票走势图

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

翻译|使用教程|编辑:董玉霞|2022-04-08 11:20:45.487|阅读 319 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

慧都315,为正版护航


此功能仅在 Gantt PRO 版本中可用。

点击获DhtmlxGantt官方正式版

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

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

灯箱中的 jQuery Datepicker

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

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

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

  • 在页面上包含 jQuery 库的源文件:
    <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link  rel="stylesheet" type="text/css" 
        href="//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 一样添加到灯箱中。

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

要在甘特图中使用 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甘特图


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP