您可以将自定义datepicker控件添加到lightbox中，通过指定任务的开始和结束日期来设置任务持续时间。
jQuery Datepicker在lightbox，例如，你可以在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" }];
在灯箱中引导Datepicker，Bootstrap Datepicker可以像jQuery Datepicker一样以类似的方式添加到lightbox中。
在甘特图中使用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" }];
DHTMLX Gantt享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足项目管理控件应用的所有需求，是最完善的甘特图图表库。2022年终狂欢火热进行中，知名软控件产品享超低折扣，满额豪礼赠，复购双重大礼！了解更多内容，欢迎在线咨询或者私信我获取正版试用版及 价。
甘特图控件交流群：764148812 欢迎进群交流讨论
年终狂欢季，全场产品，限时特惠，立即了解详情！
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！