日期和时间选择器作为 Tabulator 中的自定义编辑器

如何解决日期和时间选择器作为 Tabulator 中的自定义编辑器

如何创建自定义日期和时间选择器编辑器，而不仅仅是日期选择器编辑器？

我使用 jquery-ui-timepicker 附加组件独立制作了 jquery-ui 库中的日期和时间选择器，但我无法将其与制表器自定义编辑器一起使用。

任何帮助都会很棒。谢谢！

解决方法

Tabulator 的文档包括一个 guide to making custom editors

本质上，重要的一点是它需要返回一个 DOM 节点，即在设置值时调用“成功”函数，如果值没有改变则调用“取消”函数。

对于 jquery UI 小部件，您还需要确保在 onRendered 回调中实例化该小部件，该回调在将元素添加到 DOM 时触发，否则 jQuery 会出错。

作为基于内置输入编辑器的基本示例：

var dateFormatter = function(cell,onRendered,success,cancel,editorParams){
    var cellValue = cell.getValue(),var input = document.createElement("input"); // define input element
    
    //assign current cell value to input element
    input.value = typeof cellValue !== "undefined" ? cellValue : "";

    //handle loss of focus to the input element and changes in value
    function onChange(e){
        if(((cellValue === null || typeof cellValue === "undefined") && input.value !== "") || input.value !== cellValue){
            success(input.value); //if value has changed save value 
        }else{
            cancel(); //otherwise cancel edit
        }
    }
    
    //submit new value on blur or change
    input.addEventListener("change",onChange);
    input.addEventListener("blur",onChange);

    //instantiate the jQuery widget
    onRendered(function(){
        $(input).datepicker({
            //date picker setup options
        });
    });

    //return input element
    return input;
}

（如果您必须单击 jQuery 小部件的控件，则使用模糊事件可能会导致问题，因此您可能需要注释掉模糊事件侦听器）

（此外，根据使用情况，更改事件可能不是您需要的，但我相信 jquery datepicker 小部件具有 onSelect 回调，您可以使用它来触发成功函数）

然后您需要将格式化程序附加到列定义中的列：

{title:"Date",field:"date",formatter:dateFormatter}