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

Question

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

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

任何帮助都太好了。谢谢你！

Answer 1

Tabulator的文档包含了制作自定义编辑器的指南

本质上重要的是，它需要返回一个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;
}

(使用blur事件可能会导致问题，如果你必须点击jQuery小部件的控件，所以你可能想要注释掉blur事件监听器)

(根据使用情况，更改事件可能不是您需要的，但我相信jquery日期拾取器小部件有一个onSelect回调，您可以使用它来触发成功函数)

然后需要在列定义中将格式化程序附加到列上:

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