Date and Time picker as custom editor in Tabulator

Question

How do I create a custom date and time picker editor instead of just a date picker editor?

I have made a date and time picker from jquery-ui library with a jquery-ui-timepicker add-on independently, but i cannot get this to work with tabulator custom editor.

Any help would be great. thank you!

question from:https://stackoverflow.com/questions/65946308/date-and-time-picker-as-custom-editor-in-tabulator

Answer 1

Tabulator's documentation includes a guide to making custom editors

Essentially the important bits are that it needs to return a DOM Node, that is should call the 'success' function when a value has been set and 'cancel' if the value hasn't changed.

In the case of a jquery UI widget then you also need to make sure you instantiate the widget inside the onRendered callback which is triggered when the element is added to the DOM otherwise jQuery will error.

As a basic example based on the built in input editor:

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;
}

(Using the blur event may cause issues if you have to click in controls for the jQuery widget so you may want to comment out the blur event listener)

(Also the change event may not be what you need depending on the usage case but i believe the jquery datepicker widget has an onSelect callback that you could use to trigger the success function)

You would then need to attach the formatter to the column in its column definition:

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