javascript - 无法将 datetimepicker 添加到 Tabulator 列

Question

我想为我的 Tabulator 表创建自定义编辑器。我需要编辑日期值并想使用 jQuery DateTimePicker。

我试图从 Tabulator 网站编辑示例代码，但它不适合我。我的自定义编辑器代码如下所示：

var dateEditor = function (cell, onRendered, success, cancel, editorParams) {
            var editor = document.createElement("input");
            editor.setAttribute("type", "text");

            editor.value = cell.getValue();

            onRendered(function(){
                jQuery(editor).datetimepicker({
                    format: "dd.mm.yyyy HH:mm",
                }); 
                editor.focus();
            });

            function onChange(e){
              success(editor.value);
            }
            editor.addEventListener("change", onChange);
            editor.addEventListener("blur", onChange);


            return editor;
};

和列定义：

{title:"Date", field:"date", align:"left", headerFilter: "input", editor: dateEditor, headerFilterPlaceholder:" "},

Datepicker 组件出现，但是当我尝试更改值时，出现以下消息：

“此日期选择器的未捕获的缺失实例数据”

谢谢你的帮助。

编辑#1：发现日期格式存在问题，但主要问题仍然存在。

标签： javascriptjquerydatedatetimepickertabulator

Answer 1

我能够重现该问题。问题是您不应该使用文本框的onChangeoronBlur事件。相反，您想使用日期选择器事件

var dateEditor = function(cell, onRendered, success, cancel, editorParams){
    var cellValue = cell.getValue(),
    input = document.createElement("input");

    input.setAttribute("type", "text");

    input.style.padding = "4px";
    input.style.width = "100%";
    input.style.boxSizing = "border-box";

    input.value = typeof cellValue !== "undefined" ? cellValue : "";

    onRendered(function(){
        input.style.height = "100%";
        $(input).datepicker({
            onClose: onChange
        }); //turn input into datepicker
        input.focus();
    });

    function onChange(e){
        if(((cellValue === null || typeof cellValue === "undefined") && input.value !== "") || input.value != cellValue){
            success(input.value);
        }else{
            cancel();
        }
    }

    return input;
}

https://jsfiddle.net/kcf1jes0/7/