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

Question

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

我用 jquery-ui 库和 jquery-ui-timepicker 插件独立制作了一个日期和时间选择器，但我无法获得这与制表符自定义编辑器一起使用。

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

Answer 1

Tabulator 的文档包括 guide to making custom editors

本质上重要的一点是它需要 return 一个 DOM 节点，即在设置值时应该调用 'success' 函数并且 'cancel'如果值没有改变。

在 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 日期选择器小部件有一个 onSelect 回调，您可以使用它来触发成功函数)

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

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

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

Date and Time picker as custom editor in Tabulator

tabulator