Include Timepicker Addon in Editor

dkachel

Hi together,

I'm using the Timepicker addon (http://trentrichardson.com/examples/timepicker/) in Editor in order to pick the time next to the date.
It's working great, with one exception. The value of that input field will not be sent.

Using "dateTime" as type results in: time: "0"

label: "Date:",
name: "time",
type: "dateTime",
dateFormat: 'yy-mm-dd',
timeFormat: 'HH:mm:ss'

Using "date" as type is working and results in: time: "2015-08-14"

label: "Date:",
name: "time",
type: "date",
dateFormat: 'yy-mm-dd'

I'm sure, I have missed something, I just don't know what.
I'm thankful for any help.

CSS files

//cdn.datatables.net/1.10.7/css/jquery.dataTables.css
//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css
/assets/css/dataTables.editor.css
//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css
//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css
/assets/css/jquery-ui-timepicker-addon.css

JS files

//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
//code.jquery.com/ui/1.11.2/jquery-ui.min.js
//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js
//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js
/assets/js/dataTables.editor.js
/assets/js/jquery-ui-timepicker-addon.js

Code

<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
</script> 

<script type="text/javascript" language="javascript" class="init">

var editor;

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {

        ajax: "ajax/list.php",
        table: "#item_table",
        fields: [{
                label: "Item",
                name: "item"
            },  {
                label: "Price:",
                name: "price",
            },  {
                label: "Date:",
                name: "time",
                type: "dateTime",
                dateFormat: 'yy-mm-dd',
                timeFormat: 'HH:mm:ss'
            }
        ]
    } );



    $('#item_table').DataTable( {
        dom: "Tfrtip",
        ajax: "ajax/list.php",
        columns: [
            { data: null, defaultContent: '', orderable: false },
            { data: "item" },
            { data: "price" },
            { data: "time" }
        ],
        order: [ 3, 'desc' ],
        tableTools: {
            sRowSelect: "os",
            sSwfPath: "//cdn.datatables.net/tabletools/2.2.3/swf/copy_csv_xls_pdf.swf",
            sRowSelector: 'td:first-child',
            aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                {
                    sExtends:    "select_single",
                    sButtonText: "Duplicate",
                    fnClick:     function( button, config ) {
                        var node = this.fnGetSelected();
 
                        if ( node.length !== 1 ) {
                            return;
                        }
 
                        var values = editor.edit( node[0], false ).val();
 
                        editor
                            .create( {
                                title: 'Duplicate this trade',
                                buttons: 'Create from existing'
                            } )
                            .set( values );
                    }
                },
                { sExtends: "editor_remove", editor: editor },
                {
                    sExtends: "collection",
                    sButtonText: "Export",
                    sButtonClass: "save-collection",
                    aButtons: [ 'copy', 'csv', 'xls', 'pdf', 'print']
                }
                
            ]
        }
    } );

} );



 // TimePicker Code

$.fn.dataTable.Editor.fieldTypes.dateTime = {
    /*
    * Requires jQuery UI, DatePicker, and Trent Richardson's TimePicker: <a href="http://trentrichardson.com/examples/timepicker/" target="_blank" rel="nofollow">http://trentrichardson.com/examples/timepicker/</a> (including CSS)
    */
    "create": function (conf) {
        conf._input = $('<input />').attr($.extend({
            id: conf.id
        }, conf.attr || {}));
 
        // Default time/date format is standard ISO-8601. See <a href="http://en.wikipedia.org/wiki/ISO_8601" target="_blank" rel="nofollow">http://en.wikipedia.org/wiki/ISO_8601</a>
        if(!conf.dateFormat) conf.dateFormat = $.datepicker.ISO_8601;
        if(!conf.timeFormat) conf.timeFormat = 'HH:mm:ss';
        if(!conf.separator)  conf.separator = ' ';
        if (!conf.showTime) conf.showTime = true;
        if (!conf.dateImage) {
            conf.dateImage = "/images/calendar.gif";
        }
 
        setTimeout(function () {
            $(conf._input).datetimepicker({
                // JUI DatePicker options
                showOn: "both",
                buttonImage: conf.dateImage,
                buttonImageOnly: true,
                dateFormat: conf.dateFormat,
                changeMonth: true,
                changeYear: true,
 
                // TimePicker options. See <a href="http://trentrichardson.com/examples/timepicker/" target="_blank" rel="nofollow">http://trentrichardson.com/examples/timepicker/</a> 
                timeFormat: conf.timeFormat,
                separator: conf.separator,
                showTime: conf.showTime
            });
            $('#ui-timepicker-div').css('display', 'none');
        }, 10);
 
        return conf._input[0];
    } };
</script>

allan

Looks like you might just need a get function in your plug-in. Something like:

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

A similar set function might also be required.

I'm slightly surprised with works at all without them, but even if that doesn't work immediately, that is then the point where debugging could start - insert debug statements / breakpoints to make sure that code is being hit.

Allan

dkachel

Yes! That's it. Thanks a lot Allan.

get and setFormatter does the rest to convert from and into a timestamp

->getFormatter( function ( $val, $data, $opts ) { return date( 'Y-m-d H:i:s', $val ); } )
->setFormatter( function ( $val, $data, $opts ) { $a = strptime($val, '%Y-%m-%d %H:%M:%S'); return mktime($a['tm_hour'], $a['tm_min'], $a['tm_sec'], $a['tm_mon']+1, $a['tm_mday'], $a['tm_year']+1900); } )

Now I only need to find a way to display the date only "2015-08-14" in the table and the full date "2015-08-14 17:26:15" in the new/edit window.

Thanks for your help