Eonasdan Bootstrap Datetimepicker

Eonasdan Bootstrap Datetimepicker

btreebtree Posts: 99Questions: 14Answers: 11


just want to share my custom plugin for eonasdan bootstrap datetimepicker. Backgroundinfo: My customers can choose between two date formats and I like the bootstrap more than the jquery.

Custom Field Type Code:

// Custom Field Type for Datatables Form
(function ($, DataTable) {

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

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

_fieldTypes.customdate = {
    create: function ( conf ) {
        var that = this;
        // Create the elements to use for the input
        conf._input = $( 
            '<div id="datetimepicker1" class="input-group date">'+
            '<input id="date" name="date" type="text" class="form-control">'+
            '<span class="input-group-addon">'+
            '<span class="fa fa-calendar"></span>'+
        return conf._input;

    get: function ( conf ) {
        return $('#date', conf._input).val();  //return the field value POST
    set: function ( conf, val ) {
        $('#date', conf._input).val(val);  //set the field value from movedate.date response


})(jQuery, jQuery.fn.dataTable);

Field Code:

            id: 'datetimepicker1',
            label: i18n.gettext("Movedate:"),
            name: 'movedate.date',
            def:  moment().format(dateformat),
            type: 'customdate'

Datepicker Code:

function simple_datepicker(e){
        format: dateformat,
                locale: lang,
        useCurrent: true,
        defaultDate: moment()       

Hook Up Code:

editor.on('open', function(e, type){



  • allanallan Posts: 57,236Questions: 1Answers: 9,113 Site admin

    Hi Hannes,

    Absolutely brilliant - thanks for sharing this with us!


This discussion has been closed.