在 Tabulator 中使用 jQuery 日期选择器时如何禁用未来日期？

Question

我试图禁用与 Tabulator 一起使用的 jQuery datepicker 的未来日期，但无济于事。

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.net/nrayburn/65t1dp23/49/

最重要的两个部分包括验证器，这样用户就无法输入日期。（我不认为他们可以，但如果他们以某种方式这样做将防止无效日期。）。另一个是在创建日期选择器实例时使用日期选择库中的 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();
  });

在 Tabulator 中使用 jQuery 日期选择器时如何禁用未来日期？

How do I disable future dates when using jQuery datepicker inside Tabulator?

jquery-ui-datepicker

tabulator