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

Question

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

我已经使用 jquery-ui-timepicker 插件独立地从 jquery-ui 库中制作了一个日期和时间选择器，但我无法让它与制表器自定义编辑器一起使用。

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

Answer 1

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 小部件的控件，则使用 blur 事件可能会导致问题，因此您可能需要注释掉 blur 事件侦听器）

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

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

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