提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:董玉霞|2022-04-08 11:20:45.487|阅读 319 次
概述:在DhtmlxGantt中自定义第三方日期选择器 。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
此功能仅在 Gantt PRO 版本中可用。
在DhtmlxGantt中自定义第三方日期选择器 。
您可以通过指定任务的开始和结束日期将自定义日期选择器控件添加到灯箱以设置任务持续时间。
例如,您可以在 jQuery UI Datepicker 的基础上创建一个 Datepicker 控件。
要在甘特图中使用 jQuery Datepicker 控件:
<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) { } } })();
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 控件:
(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) => { } } })();
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是针对您的解决方案的交互式JavaScript / HTML5甘特图。
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn
本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@capbkgr.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢