Editor - Custom Field datetime-local

jordivela007

I need to create a new custom field using a input type datetime-local supported by chrome.
But i don't know how to obtain the value of the input and how to assign a value.

$.fn.dataTable.Editor.fieldTypes.DateTime = $.extend( true, {}, $.fn.dataTable.Editor.models.fieldType, {
    "create": function ( conf ) {
        var that = this;
 
        conf._enabled = true;
 
        // Create the elements to use for the input
        conf._input = $(
            '<div>'+
                '<input class="inputDateTime" id="' + conf.id + '" type="datetime-local" >'+
            '</div>')[0];

        return conf._input;
    },
 
    "get": function ( conf ) {
        /* How to obtain the value of the input  ? */
        return $('input.selected', conf._input).attr('value'); // ?
        
    },
 
    "set": function ( conf, val ) {
        /* How to Set the value returned by the query to the input ? */
        $('input.inputDateTime[value="'+val+'"]', conf._input).addClass('selected');
    }

} );

editor = new $.fn.dataTable.Editor({
            ajax: "php/tevents.php",
            table: "#TablaAgenda",
            fields: [
                {
                    label: "Date1:",
                    name: "events.datetime",
                    type: "DateTime"  /* CUSTOM FIELD */
                },
 {
                    label: "Date2:",
                    name: "events.datetime2",
                    type: "DateTime"  /* CUSTOM FIELD */
                }
]
});

And in the tevents.php

$editor = Editor::inst( $db, 'events' )
        ->pkey('event_id')
    ->fields(
        Field::inst( 'events.event_id' ),
                Field::inst( 'events.datetime' ) 
                    ->getFormatter( function ( $val ) {
                return date("Y-m-d\TH:i:s", strtotime($val)); /* CONVERT the MYSQL datetime to jquery datetime
            } ),
            Field::inst( 'events.datetime2' ) 
                    ->getFormatter( function ( $val ) {
                return date("Y-m-d\TH:i:s", strtotime($val)); /* CONVERT the MYSQL datetime to jquery datetime
            } )

jordivela007

Solved:

    // Our custom field type
$.fn.dataTable.Editor.fieldTypes.DateTime = $.extend( true, {}, $.fn.dataTable.Editor.models.fieldType, {
    "create": function ( conf ) {
        // Create the elements to use for the input
        conf._input = $(
            '<div>'+
                '<input class="inputDateTime" id="' + conf.id + '" type="datetime-local" >'+
            '</div>')[0];

        return conf._input;
    },
 
    "get": function ( conf ) {
        return conf._input.childNodes[0].value;
    },
 
    "set": function ( conf, val ) {
        conf._input.childNodes[0].value = val;
    }

} );

allan

Another option is to use the attr option of the text input. That can be used to set the type attribute of the input element without needing to define a whole new plugin. For example:

{
  label: 'Date / time:',
  attr: {
    type: 'datetime-local'
  }
}

I wish more browsers would support these HTML5 input types!

Regards,
Allan