Date-time field type support

[gbisheimer]

I'm wondering if it can be considered to add a datetime JQuery plugin in future releases of JTable. I've written a plugin that makes use of date.format.js and Timepicker JQuery addon for Datepicker widget, both released under MIT license.

Following is the code for the plugin. Because date.format.js and Timepicker use different format placeholders (the former can format full date object including timezone, while the latest only accepts time), I've just removed formating options in method _createDateTimeInputForField. I have to figure out the best way to allow this in future releases.

/************************************************************************
* DATETIME extension for jTable                                         *
*************************************************************************/
(function($) {

    //Reference to base object members
    var base = {
        _createInputForRecordField: $.hik.jtable.prototype._createInputForRecordField,
        _getDisplayTextForRecordField: $.hik.jtable.prototype._getDisplayTextForRecordField
    };

    //extension members
    $.extend(true, $.hik.jtable.prototype, {

        /************************************************************************
     * OVERRIDED METHODS                                                     *
     *************************************************************************/

        /* Creates an input element according to field type.
     *************************************************************************/
        _createInputForRecordField: function (fieldName, value, record) {
            //Get the field
            var field = this.options.fields[fieldName];

            if (field.input || field.type != 'datetime'){ // If not a datetime field, call base method
                return base._createInputForRecordField.apply( this, arguments );    
            }

            //If value if not supplied, use defaultValue of the field
            if (value == undefined || value == null) {
                value = field.defaultValue;
            }
            return this._createDateTimeInputForField( field, fieldName, value );
        },

        /* Gets text for a field of a record according to it's type.
     *************************************************************************/
        _getDisplayTextForRecordField: function (record, fieldName) {
            var field = this.options.fields[fieldName];

            if (field.display || field.type != 'datetime') { // If not a datetime field, call base method
                return base._getDisplayTextForRecordField.apply( this, arguments );
            }
            var fieldValue = record[fieldName];

            return this._getDisplayTextForDateTimeRecordField(field, fieldValue);
        },        

    /************************************************************************
     * PRIVATE METHODS                                                     *
     *************************************************************************/

     /* Creates a date input for a field.
     *************************************************************************/
        _createDateTimeInputForField: function (field, fieldName, value) {
            var $input = $('<input class="' + field.inputClass + '" id="Edit-' + fieldName + '" type="text"' + (value != undefined ? 'value="' + value + '"' : '') + ' name="' + fieldName + '"></input>');
            $input.datetimepicker({
                stepMinute: 10
            });
            return $('<div />')
            .addClass('jtable-input jtable-date-input')
            .append($input);
        },

        /* Gets text for a datetime field.
     *************************************************************************/
        _getDisplayTextForDateTimeRecordField: function (field, fieldValue) {
            if (!fieldValue) {
                return '';
            }

            var displayFormat = field.displayFormat || (this.options.defaultDateFormat + ' ' + this.options.defaultTimeFormat);

            var date = this._parseDate(fieldValue);
            return date.format( displayFormat );
        }

    });

})(jQuery);

[hikalkan]

That's very good. I was thinking to add a datetimepicker and timepicker options. Your code in the queue to add :) Thanks a lot.

[casanovadn]

How can i use this code to display and edit my datetimepicker???

[casanovadn]

Hi gbisheimer,

Could you explain me more details about datetimepicker in jtable??? Thanks

[mkris2003]

Hi, When i add above code under jquery.jtable.js. it is not working i set type: 'datetime ', , it is not displaying any picker when i clcik edit button . may i know how to plugin datetime picker.

[mkris2003]

Hi, When i add above code under jquery.jtable.js. it is not working i set type: 'datetime ', , it is not displaying any picker when i click edit button . may i know how to plugin datetime picker.

[brunobraga]

Got this script to work by adding Date.format scripts (http://stackoverflow.com/questions/3552461/how-to-format-javascript-date), and a small change:

 _createDateTimeInputForField: function (field, fieldName, value) {
            var $input = $('<input class="' + field.inputClass + '" id="Edit-' + fieldName + '" type="text"' + (value != undefined ? 'value="' + this._getDisplayTextForDateTimeRecordField(field, value) + '"' : '') + ' name="' + fieldName + '"></input>');
            $input.datetimepicker();
            return $('<div />')
            .addClass('jtable-input jtable-date-input')
            .append($input);
        },

Then you place the field property as:

    Column: {
                        title: 'Column',
                        type: 'datetime',
                        displayFormat: 'd/m/Y H:i'
               }

And voila!

[anurat]

@hikalkan This feature will be very useful. Many of us have to deal with datetime a lot. Please consider adding this feature to jTable soon.

[nickleus]

what's the status on this AND/OR a better description of how to implement this hack? thx in advance :)

[nickleus]

i've figured it out for those who are still tearing their hair out about this :)

STEP 1 put this code at the bottom of jquery.jtable.js then save it:

/************************************************************************
 * DATETIME extension for jTable                                         *
 *************************************************************************/
(function($) {

    //Reference to base object members
    var base = {
        _createInputForRecordField: $.hik.jtable.prototype._createInputForRecordField,
        _getDisplayTextForRecordField: $.hik.jtable.prototype._getDisplayTextForRecordField
    };

    //extension members
    $.extend(true, $.hik.jtable.prototype, {

        /************************************************************************
         * OVERRIDED METHODS                                                     *
         *************************************************************************/

        /* Creates an input element according to field type.
         *************************************************************************/
        _createInputForRecordField: function (funcParams) {
                var fieldName = funcParams.fieldName,
                value = funcParams.value,
                record = funcParams.record,
                formType = funcParams.formType,
                form = funcParams.form;

            //Get the field
            var field = this.options.fields[fieldName];

            if (field.input || field.type != 'datetime'){ // If not a datetime field, call base method
                return base._createInputForRecordField.apply( this, arguments );
            }

            //If value if not supplied, use defaultValue of the field
            if (value == undefined || value == null) {
                value = field.defaultValue;
            }
            return this._createDateTimeInputForField( field, fieldName, value );
        },

        /* Gets text for a field of a record according to it's type.
         *************************************************************************/
        _getDisplayTextForRecordField: function (record, fieldName) {
            var field = this.options.fields[fieldName];

            if (field.display || field.type != 'datetime') { // If not a datetime field, call base method
                return base._getDisplayTextForRecordField.apply( this, arguments );
            }
            var fieldValue = record[fieldName];

            return this._getDisplayTextForDateTimeRecordField(field, fieldValue);
        },

        /************************************************************************
         * PRIVATE METHODS                                                     *
         *************************************************************************/

        /* Creates a date input for a field.
         *************************************************************************/
        _createDateTimeInputForField: function (field, fieldName, value) {
            var $input = $('<input class="' + field.inputClass + '" id="Edit-' + fieldName + '" type="text"' + (value != undefined ? 'value="' + value + '"' : '') + ' name="' + fieldName + '"></input>');
            $input.datetimepicker({
                stepMinute: 10
            });
            return $('<div />')
                .addClass('jtable-input jtable-date-input')
                .append($input);
        },

        /* Gets text for a datetime field.
         *************************************************************************/
        _getDisplayTextForDateTimeRecordField: function (field, fieldValue) {
            if (!fieldValue) {
                return '';
            }

            var displayFormat = field.displayFormat || (this.options.defaultDateFormat + ' ' + this.options.defaultTimeFormat);

            var date = this._parseDate(fieldValue);
            return date.format( displayFormat );
        }

    });

})(jQuery);

STEP 2 declare the jtable field you want to use datetimepicker like this:

                                        time_of_call: {
                                            title: 'time of call',
                                            type: 'datetime'
                                        },

STEP 3 make sure you use the most up-to-date jquery libs in your html:

    <link href="jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <link href="jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="jquery-datetimepicker/jquery.datetimepicker.css"/ >
    <script src="jquery-1.11.2/jquery-1.11.2.js" type="text/javascript"></script>
    <script src="jquery-ui-1.11.4/jquery-ui.js" type="text/javascript"></script>
    <script src="jtable/jquery.jtable.js" type="text/javascript"></script>
    <script src="jquery-datetimepicker/jquery.datetimepicker.js"></script>

NOTE: i needed to make some changes to @gbisheimer's code:

_createInputForRecordField: function (fieldName, value, record) {

needed to be changed to:

        _createInputForRecordField: function (funcParams) {
                var fieldName = funcParams.fieldName,
                value = funcParams.value,
                record = funcParams.record,
                formType = funcParams.formType,
                form = funcParams.form;

this is because jtable sends the parameters as an object, not a string.

[Anantha19945]

I cant get this to work!