CODEWITHSUNDEEP
javascriptjquerydatedatetimepickertabulator
Pogasta
Pogasta

Reputation: 147

Can ’t add datetimepicker to Tabulator column

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.

Upvotes: 3

Views: 1490

Answers (1)

Tarun Lalwani
Tarun Lalwani

Reputation: 146500

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/

Working fine

Upvotes: 4

Related Questions