I realise that this may be the wrong forum for this question, and I apologise in advance as it involves a third party implementation / api. The reason that I have posted this here is in case it could be a DT issue.

I have been using the excellent colour picker implementation by Greg Brainerd at https://datatables.net/forums/discussion/32658/color-picker which uses Spectrum.

I managed to implement the colour picker in V2, but I
am now having issues with V3 so if anyone could assist, I would be greatful.

To demonstrate the problem I have created a website with two URLS, one with the V2 libraries in the html file and the other with V3. All other files (javascript / php controller files etc ) are common and both both use JQuery. The PHP environment is the latest from the Datatables Download Builder, but I have changed the V3 libraries to the nightly ones for now. The DT license file has been removed as well.

The two URLS are:

https://dt.taskmgr.co.uk/colourV2.html (Datatables V2 libraries)

https://dt.taskmgr.co.uk/colourV3.html (Datatables V3 libraries)

The issue is that when you edit /create a row you now get the following in the "colour" field, "[object][object]". I don't see any messages in the browser (Chrome) dev console.

This what the V3 issue looks like:

This is V2:

Apologies again in advance if this is in the wrong forum.

JavaScript file

(function ($, DataTable) {

    if (!DataTable.ext.editorFields) {
        DataTable.ext.editorFields = {};
    }

    var Editor = DataTable.Editor;
    var _fieldTypes = DataTable.ext.editorFields;

    _fieldTypes.colorpicker = {
        create: function (conf) {
            var that = this;

            conf._enabled = true;

            // Create the elements to use for the input
            conf._input = $(
                '<div id="' + Editor.safeId(conf.id) + '">' +
                '<input type="text" class="basic" id="spectrum"/>' +
                '<em id="basic-log"></em>' +
                '</div>');

            // Use the fact that we are called in the Editor instance's scope to call
            // input.ClassName
            $("input.basic", conf._input).spectrum({
                //color: "#f00",
                change: function (color) {
                    $("#basic-log").text(color.toHexString());
                }
            });
            return conf._input;
        },

        get: function (conf) {
            var val = $("input.basic", conf._input).spectrum("get").toHexString();
            return val;
        },

        set: function (conf, val) {
            $("input.basic", conf._input).spectrum({
                color: val,
                change: function (color) {
                    $("#basic-log").text("change called: " + color.toHexString());
                }
            });
        },

        enable: function (conf) {
            conf._enabled = true;
            $(conf._input).removeClass('disabled');
        },

        disable: function (conf) {
            conf._enabled = false;
            $(conf._input).addClass('disabled');
        }
    };
})(jQuery, jQuery.fn.dataTable);




addEventListener("DOMContentLoaded", function () {

    var editor = new DataTable.Editor({
        ajax: 'php/table.colour.php',
        table: 'table.display',
        fields: [
            {
                "label": "Information:",
                "name": "information"
            },
            {
                "label": "Colour:",
                "name": "colour",
                "type": "colorpicker",
            }
        ]
    });

    var table = new DataTable('table.display', {
        //  data: dataSet.data,
        ajax: 'php/table.colour.php',
        columns: [
            {
                "data": "information"
            },
            {
                data: "colour",
                render: function (data, type, row) {
                    if (type === 'display') {
                        return '<div class="colorSquare" style="background:' + data + ';"></div>';
                    }
                    return data;
                },
                className: "dt-body-center"
            },
        ],
        layout: {
            topStart: {
                buttons: [
                    { extend: 'create', editor: editor },
                    { extend: 'edit', editor: editor },
                    { extend: 'remove', editor: editor }
                ]
            },
            bottomStart: null,
            bottomEnd: null
        },
        select: true
    });

});