jquery - 在 JTable 中显示日期和时间

Question

我在我的 MVC 应用程序中使用 JTable(第一次)，并且想要显示需要显示日期和时间的日期时间列。 我能够显示日期。下面是该列在 JTable 定义中的样子。

 AssignedDate: {
                title: 'Assigned Date',
                width: '15%',
                type: 'date',
                displayFormat: 'mm/dd/yy',
                create: false,
                edit: false
            },

如何显示时间？ 我知道我需要更改类型和显示格式 - 但不知道将其更改为什么。

Answer 1

第 1 步:将此代码放在 jquery.jtable.js 的底部，然后保存:

 /************************************************************************
 * 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="' + this._getDisplayTextForDateTimeRecordField(field, 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);

第 2 步:声明要使用 datetimepicker 的 jtable 字段，如下所示:

 time_of_call: {
                    title: 'time_of_call',
                    type: 'datetime',
                    displayFormat: 'dd-mm-yy HH:MM:SS TT'
                },

第 3 步:确保在 html 中使用最新的 jquery 库:

   <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>