项目管理工具DHTMLX Gantt灯箱元素配置教程：如何对时间进行控制

本文给大家讲解DHTMLX Gantt如何对时间进行控制，欢迎大家下载最新版试用体验！

一对选择器，用于通过指定任务的开始和结束日期来设置任务持续时间，如下所示：

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

1、初始化

要将时间控件添加到灯箱，请按照以下步骤操作：

1、在灯箱配置中添加一个部分：

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

2、给部分设置标签：

gantt.locale.labels.section_period = "Time period";

2、属性

以下属性最重要且通常用的时间控属性：

name – (字符串) 部分名称

高度- （数字）截面高度

map_to – ( string,object ) “auto” 或对象，定义将映射到该部分的数据属性（-ies）

type – ( string )部分控件的类型

focus – ( boolean ) 如果设置为true，该部分将专注于打开灯箱

readonly – ( boolean ) 如果设置“true”值，该部分将是只读的

year_range – ( array,number ) 设置年份选择器的范围。范围可以通过 2 种方式设置：

year_range: [2005, 2025] – 从 2005 年到 2025 年的时间段

year_range: 10 – 一个时期[当前年份 – 10 年；本年度+10年]

single_date – ( boolean ) 如果您设置“true”值，则该部分中只会显示开始日期选择器。已编辑的任务将仅按开始日期指定，并且持续时间为零。仅对里程碑有意义

time_format – ( string ) 设置日期时间选择器的顺序

autofix_end – ( boolean ) 定义如果选择的开始日期大于结束日期，是否会自动更正结束日期，默认为true。disabled 模式允许验证日期，但如果您启用该模式但不验证日期，则当start_date大于end_date时，您可以获得持续时间为 0 的任务。

3、配置日期和时间选择器

要配置“持续时间”或“时间”部分的选择器，请使用time_format属性：

gantt.config.lightbox.sections = [    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},    {name:"time",type:"time", map_to:"auto", time_format:["%d","%m","%Y","%H:%i"]}];

注意：time_format数组支持的选择器是：

• “%d” – 日期选择器
• “%m” – 月份选择器
• “%Y” – 年份选择器
• “%H:%i” – 时间选择器（格式用time_picker模板设置）

您可以仅更改数组中这些成员的顺序和数量，但不能更改数据表示格式。
例如，您可以更改格式，如下所示：

// time goes firsttime_format:["%H:%i", "%m", "%d", "%Y"]// month goes firsttime_format:["%m","%d", "%Y", "%H:%i"]// the year selector is removedtime_format:["%H:%i", "%m", "%d"]// incorrecttime_format:["%H:%i", "%M", "%d", "%Y"] // "%m" was changed to "%M"

4、映射到自定义开始/结束日期时间属性

默认映射

通常，通过将map_to属性设置为“auto”值（map_to:”auto”），时间和持续时间控件被映射到强制的 ‘start_date’、’end_date’ 数据属性。

自定义映射

要将控件映射到某些自定义日期属性（而不是 ‘start_date’、’end_date’），请使用map_to属性的对象表示法：

gantt.config.lightbox.sections = [    {name: "description", height: 72, type: "textarea", map_to:"text", focus: true},    {name: "time",        height: 72, type: "duration", map_to:"auto"},    {name: "deadline",    height: 72, type: "time",     map_to:{start_date:"planned_start",end_date:"planned_end"}}];

一个对象map_to有 3 个属性：

1. start_date – 将存储输入中设置的开始日期的数据属性的名称
2. end_date – 可选，将存储输入中设置的结束日期的数据属性的名称
3. duration – 可选，将存储由输入定义的持续时间的数据属性的名称

DHTMLX Gantt享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足项目管理控件应用的所有需求，是最完善的甘特图图表库。2022年终狂欢火热进行中，知名软控件产品享超低折扣，满额豪礼赠，复购双重大礼！了解更多内容，欢迎在线咨询或者私信我获取正版试用版及报价。

甘特图控件交流群：764148812    欢迎进群交流讨论

年终狂欢季，全场产品，限时特惠，立即了解详情！

标签：

来源：慧都