Handsontable header 具有每周日期格式

Question

我要实施handsontable like header contains weekly date format, for more check below image

Header 从当前日期开始到接下来的 7 天，一个按钮用于滚动下一个和上一个日期。我尝试使用 help of this

下面的代码

 {
    type: 'date',
    dateFormat: 'MM/DD/YYYY',
    correctFormat: true,
    defaultDate: '01/01/1900'
  }

但它将日期选择器显示为单元格值而不是列 header。有谁知道如何使用 handsontable 在 header 列中显示从星期一开始的本周。

Answer 1

您不能使用此方法，因为列仅用于正文 table。

您可以使用 afterGetColHeader (doc) :

afterGetColHeader(col, TH) {

}

并在 TH 元素中插入日期选择器。

Answer 2

经过一些搜索并在 java 脚本的帮助下，我提出了我的解决方案以进行更多检查

function loadTable(weekDays) {
var example2 = document.getElementById('example2');
var hot2 = new Handsontable(example2, {
data: Handsontable.helper.createSpreadsheetData(3, 7),
colHeaders: weekDays
});

function bindDumpButton() {
  if (typeof Handsontable === "undefined") {
    return;
  }

  Handsontable.Dom.addEvent(document.body, 'click', function (e) {

    var element = e.target || e.srcElement;

    if (element.nodeName == "BUTTON" && element.name == 'dump') {
      var name = element.getAttribute('data-dump');
      var instance = element.getAttribute('data-instance');
      var hot = window[instance];
      console.log('data of ' + name, hot.getData());
    }
  });
}
bindDumpButton();
}

更多信息请查看此 JsFiddle

Handsontable header 具有每周日期格式

Handsontable header with weekly date format

date

handsontable