如何在Tabulator.js中接入纯JS datetime picker并解决值回传问题

问题1：dateEditorOriginal自带日历的来源 #

你用到的dateEditorOriginal是Tabulator内置的日期编辑器，自带的日历是浏览器原生<input type="date">控件的选择器，和moment无关，moment在这个逻辑里仅负责日期格式转换。

问题2：rome选择器值无法同步到Tabulator的解决方案 #

你代码的核心问题有两个：

• 你把success回调的调用代码注释了，Tabulator无法接收到你选中的新值
• 仅绑定原生change、blur事件无法监听到rome选择器对输入框的赋值操作，要改用rome自带的事件监听

修改后的完整代码如下：

var dateEditor = function(cell, onRendered, success, cancel, editorParams){
    var editor = document.createElement("input");
    var cellValue = moment(cell.getValue(), "DD-MM-YYYY HH:mm").format("DD-MM-YYYY HH:mm")
    var cal;

    editor.style.padding = "3px";
    editor.style.width = "100%";
    editor.style.boxSizing = "border-box";

    onRendered(function(){
        cal = rome(editor,{
            "inputFormat": "DD-MM-YYYY HH:mm",
            "initialValue": cellValue,    
            "timeInterval": 600,
            "weekStart": 1
        })
        // 绑定rome自带的选择完成事件
        cal.on('change', function() {
            success(moment(cal.getDate()).format("DD-MM-YYYY HH:mm"));
        })
        // 失焦时也提交值
        editor.addEventListener("blur", function() {
            if (cal.getDate()) {
                success(moment(cal.getDate()).format("DD-MM-YYYY HH:mm"));
            } else {
                cancel();
            }
        });
    });

    return editor;
};

修改后的逻辑直接从rome实例中拿选中的日期时间，主动调用Tabulator提供的success回调把格式化后的值回传给表格，就能实现选中后自动同步到单元格的效果。

内容的提问来源于stack exchange，提问作者Radek