Combodate field type plug-in

HPB

While I was looking for a clean way to include a duration picker in Editor I stumbled across Combodate. It was easy to integrate, and I thought it would be good to share it with others. I couldn't quite get the markdown as in the other custom Plug-ins, but I did my best.

• Requires: Combodate
• Requires: Moment

This plugin replaces <input type="text"> with dropdown elements to pick day, month, year, hour, minutes and seconds.

Plug-in configuration and API

Options

This field type supports the following options, in addition to the default field-options configuration:

• object opts: Combodate initialisation options object. Please refer to the Combodate documentation for the full range of options available.
• object attrs: Attributes that are applied to the -tag input element used for the date picker.

Methods

This plug-in does not provide any additional methods over those available for the all fields (see field()).

Plug-in code

Includes

This plug-in depends upon external libraries. These libraries can be obtained here:

• Combodate on GitHub
• Moment on GitHub

Javascript

(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.combodate = {
        create: function (conf) {
            var editor = this;
            conf._input = $('<input/>')
                .attr($.extend({
                    id: conf.id,
                    type: 'text',
                }, conf.attr || {}));

            setTimeout(function () {
                conf._input.combodate($.extend(
                    {
                        //Default options go here
                    }, conf.opts));
                //uncomment next line for bootstrap styling
                //$(conf._input).next('span.combodate').find('select').css('display', 'inline');
            }, 1);
            return conf._input[0];
        },

        get: function (conf) {
            return $(conf._input).combodate('getValue')
        },

        set: function (conf, val) {
            $(conf._input).combodate('setValue', val);
        },

        enable: function (conf) {
            $(conf._input).next('span.combodate').find('select').prop('disabled', false);
            $(conf._input).prop('disabled', false);
        },

        disable: function (conf) {
            $(conf._input).next('span.combodate').find('select').prop('disabled', true);
            $(conf._input).prop('disabled', true);
        },
    };
}));

Example

new $.fn.dataTable.Editor( {
 "ajax": "php/durations.php",
 "table": "#example",
 "fields": [ {
        "label": "Description:",
        "name": "description"
    }, {
        "label": "Duration:",
        "name": "duration",
        "type": "combodate",
        "opts": {
            minuteStep: 10,
            format: 'H:mm',
            template: 'H hour mm minutes',
            firstItem: 'none',
        }
    }
 ]
} );

allan

Brilliant! Thanks very much for sharing this with the community! Would it be already with you if I added this to the Editor plug-ins page?

Allan

HPB

You're more than welcome to do so.