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

點(diǎn)擊獲DhtmlxGantt官方正式版

在DhtmlxGantt中自定義第三方日期選擇器 。

您可以通過指定任務(wù)的開始和結(jié)束日期將自定義日期選擇器控件添加到燈箱以設(shè)置任務(wù)持續(xù)時(shí)間。

燈箱中的 jQuery Datepicker

例如，您可以在 jQuery UI Datepicker 的基礎(chǔ)上創(chuàng)建一個(gè) Datepicker 控件。

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

• 在頁面上包含 jQuery 庫的源文件：

  <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <link  rel="stylesheet" type="text/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" }
  ];

燈箱中的引導(dǎo)日期選擇器

 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" }
  ];

更多關(guān)于DhtmlxGantt教程的內(nèi)容可進(jìn)入官網(wǎng)查看。

DhtmlxGantt| 下載試用

DhtmlxGantt是針對(duì)您的解決方案的交互式JavaScript / HTML5甘特圖。