Can ’t add datetimepicker to Tabulator column

Question

I would like to create custom editor for my Tabulator table. I need to edit date values and would like to use jQuery DateTimePicker.

I tried to edit example code from the Tabulator website, but it is not working for me. My custom editor code looks like this:

var dateEditor = function (cell, onRendered, success, cancel, editorParams) {
            var editor = document.createElement("input");
            editor.setAttribute("type", "text");

            editor.value = cell.getValue();

            onRendered(function(){
                jQuery(editor).datetimepicker({
                    format: "dd.mm.yyyy HH:mm",
                }); 
                editor.focus();
            });

            function onChange(e){
              success(editor.value);
            }
            editor.addEventListener("change", onChange);
            editor.addEventListener("blur", onChange);


            return editor;
};

And column definition:

{title:"Date", field:"date", align:"left", headerFilter: "input", editor: dateEditor, headerFilterPlaceholder:" "},

Datepicker component shows up but when I try to change the value, following message appears:

"Uncaught Missing instance data for this datepicker"

Thanks for your help.

Edit#1: Found out, there was a problem with date format, but main problem still persits.

Answer 1

I was able to reproduce the issue. The issue is that you shouldn't use the onChange or onBlur event of the textbox. Rather you want to use the datepicker events

var dateEditor = function(cell, onRendered, success, cancel, editorParams){
    var cellValue = cell.getValue(),
    input = document.createElement("input");

    input.setAttribute("type", "text");

    input.style.padding = "4px";
    input.style.width = "100%";
    input.style.boxSizing = "border-box";

    input.value = typeof cellValue !== "undefined" ? cellValue : "";

    onRendered(function(){
        input.style.height = "100%";
        $(input).datepicker({
            onClose: onChange
        }); //turn input into datepicker
        input.focus();
    });

    function onChange(e){
        if(((cellValue === null || typeof cellValue === "undefined") && input.value !== "") || input.value != cellValue){
            success(input.value);
        }else{
            cancel();
        }
    }

    return input;
}

https://jsfiddle.net/kcf1jes0/7/