HTML type color

teriblus

Hi,

Can editor support <input type='color'/> html form control ?
I tried to add the following field without success : {label: "Couleur :", name: "color", type:'color'}

Can you point me to a quick and easy solution to acheive a color picker inside editor ?

Thank you,
Tristan

teriblus

I'm trying to have a form control like this one : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_color

teriblus

I made a plugin for that :

'''
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery', 'datatables', 'datatables-editor'], factory);
}
else if (typeof exports === 'object') {
// Node / CommonJS
module.exports = function ($, dt) {
if (!$) {
$ = require('jquery');
}
factory($, dt || $.fn.dataTable || require('datatables'));
};
}
else if (jQuery) {
// Browser standard
factory(jQuery, jQuery.fn.dataTable);
}
}(function ($, DataTable) {
'use strict';

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

var _fieldTypes = DataTable.Editor ?
    DataTable.Editor.fieldTypes :
    DataTable.ext.editorFields;


_fieldTypes.color = {
    create: function (conf) {
        conf._input = $('<input/>')
            .attr($.extend({
                id: conf.id,
                type: 'color'
            }, conf.attr || {}));


        return conf._input[0];
    },

    get: function (conf) {
        return conf._input.val();
    },

    set: function (conf, val) {
        conf._input.val(val)
    },

    enable: function (conf) {
        conf._input.prop('disabled', true);
    },

    disable: function (conf) {
        conf._input.prop('disabled', false);
    }
};

}));

'''

fernaog

Thanks, this helped me.

allan

You can use the attr option of the input type:

{
  label: "Couleur :",
  name: "color",
  attr: {
    type:'color'
  }
}

Allan