当在Tabulator中使用jQuery数据选择器时，我如何禁用未来日期？

Question

我正在尝试在Tabulator中禁用未来日期。jQuery datepicker 正在使用的 Tabulator 但无济于事。

var table = new Tabulator("#MyDiv", {
    height: "100%",
    layout: "fitDataFill",
    columns: [
        { title: "Date Worked", field: "DateComp", hozAlign: "center", sorter: "date", editor: dateEditor },
        { title: "Memo", field: "Memo", width: 144, hozAlign: "left", editor: "input" },
    ]
});

var dateEditor = function (cell, onRendered, success, cancel) {
    var cellValue = moment(cell.getValue(), "MM/DD/YYYY").format("YYYY-MM-DD");
    input = document.createElement("input");
    input.setAttribute("type", "date");
    input.style.padding = "4px";
    input.style.width = "100%";
    input.style.boxSizing = "border-box";
    input.value = cellValue;

    onRendered(function () {
        input.style.height = "100%";
        //$(input).datepicker({ endDate: new Date() });
        $(input).datepicker({ maxDate: 0 });
        input.focus();
    });

    function onChange() {
        if (input.value != cellValue) {
            success(moment(input.value, "YYYY-MM-DD").format("MM/DD/YYYY"));
        } else {
            cancel();
        }
    };
    //submit new value on blur or change
    input.addEventListener("blur", onChange);
    //submit new value on enter
    input.addEventListener("keydown", function (e) {
        if (e.keyCode == 13) {
            onChange();
        }
        if (e.keyCode == 27) {
            cancel();
        }
    });
    return input;
};

我已经尝试了几个修复方法，通过调整 datepicker 选项列表 maxDate 和 endDate)，但似乎没有任何作用。 未来的日期在 datepicker 都是可以选择的。 这是一个 Tabulator 问题？ 或者，一个 jQuery 的问题？

我发现类似的问题，关于使用 jQuery datepicker 在其他论坛上，所推荐的解决方案似乎总是围绕着使用 "大数据 "来进行。maxDate 和 endDate 选项。

任何帮助是非常感激的。

Answer 1

看起来在单元格内使用数据选择器有一个问题，我无法弄清楚。 抛出了一个关于实例数据丢失的错误。

下面是一个使用flatpickr代替jQuery数据选择器的例子。https:/jsfiddle.netnrayburn65t1dp2349

最重要的两个部分是包括一个验证器，使用户不能输入日期。 (我认为他们永远不会这样做，但如果他们以某种方式这样做，就会防止无效的日期。)。另一个是使用 maxDate 或当你创建日期选择器实例时，来自日期选择库的等价参数。

这里是一个自定义的验证器，以防止未来的任何日期。(在这个设置中，它可能无法正确处理时间差异)。

  function noFutureDate(cell, value){
    const cellValue = moment(new Date(value));
    const today = moment();
    if (cellValue.diff(today) > 0){
        return false;
    }
    return true;
  }

你还必须创建一个自定义编辑器。 这是你在日期选择器实例中特别需要的东西。 你可以从fiddle中得到其余的东西，但其他部分与日期选择器没有什么特别的关系。

  const input = document.createElement("input");
  input.value = cell.getValue();
  onRendered(function(){
    flatpickr(input, {
      maxDate: moment().format('MM/DD/YYYY')
    })
    input.focus();
  });