Tabulator: Custom datapicker error

[NHSDevGuy]

As usual, I'm not 100% that this is a bug or me getting something wrong. I've added a jquery-ui date picker to my table using a slightly modified version of code that @olifolkerd posted:

var dateEditor = function (cell, value) {
    //create and style input
    var input = $("<input type='text'/>");

    input.datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yyyy"
    });

    input.css({
        "border": "1px",
        "background": "white",
        "padding": "4px",
        "width": "100%",
        "box-sizing": "border-box"
    });

    input.val(value);

    setTimeout(function () {
        input.focus();
    }, 100);

    var inputBlur = function (e) {
        if (e.target !== input[0]) {
            if ($(e.target).closest(".ui-datepicker").length === 0) {
                $(document).off("mousedown", inputBlur);
                cell.trigger("editval", input.val());
            }
        }
    };

    $(document).on("mousedown", inputBlur);

    //submit new value on blur
    input.on("change", function (e) {
        $(document).off("mousedown", inputBlur);
        cell.trigger("editval", input.val());
    });

    input.on("click", function (e) { e.stopPropagation(); });

    //submit new value on enter
    input.on("keydown", function (e) {
        if (e.keyCode === 13) {
            $(document).off("mousedown", inputBlur);
            cell.trigger("editval", input.val());
        }
    });

    return input[0];
};

The above was v3.? code and I changed the return line to have the [0] as I'm now using v4.0.4.

The picker ignores the css I've given it and fills in the input as dd/mm/yyyyyyyy (that's 01/04/20182018).

Chrome's dev console has the following errors:

Uncaught TypeError: rendered is not a function
at Edit.edit (tabulator.4.0.js:9353)
at HTMLDivElement. (tabulator.4.0.js:9234)
Edit.edit @ tabulator.4.0.js:9353
(anonymous) @ tabulator.4.0.js:9234
dataForm.js:437 Uncaught TypeError: cell.trigger is not a function
at HTMLInputElement. (dataForm.js:437) (this is cell.trigger line in the onchange event)
at HTMLInputElement.dispatch (jquery-3.3.1.js:5183)
at HTMLInputElement.elemData.handle (jquery-3.3.1.js:4991)
at Object.trigger (jquery-3.3.1.js:8249)
at HTMLInputElement. (jquery-3.3.1.js:8327)
at Function.each (jquery-3.3.1.js:354)
at jQuery.fn.init.each (jquery-3.3.1.js:189)
at jQuery.fn.init.trigger (jquery-3.3.1.js:8326)
at Datepicker._selectDate (jquery-ui.js:8217)
at Datepicker._selectDay (jquery-ui.js:8191)

With my track record I'm doing something wrong :-)

[olifolkerd]

Hey @NHSDevGuy

The date formatting issue is because the dateFormat should be dd/mm/yy not dd/mm/yyyy seems a bit counter intuitive but it is what jQuery must have decided.

It looks like you have taken an example from a reeeeeealy old version of Tabulator there, version 2.x , which is why there are so many incompatibilities

The arguments passed into the editor are incorrect, they should be:

var dateEditor = function (cell, onRendered, success, cancel, editorParams){

and input.val(value) should be input.val(cell.getValue());

anywhere that it uses cell.trigger("editval", input.val()); it should be success(input.val())

I hope that helps,

Cheers

Oli :)

[NHSDevGuy]

It certainly did, @olifolkerd . Once again, my thanks (and apologies for not posting it as a question on stackoverflow)