在 JTable 中显示带时间的日期

Question

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

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

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

Answer 1

以下是选项：

尝试设置 displayFormat: 'dd/mm/yy HH:mm:ss' 我有我的怀疑这是否有效，因为当我阅读 jtable 文档时他们提到没有时间字段。没关系给它一个镜头。
直接（但不是最好）的方式，以防你只是展示日期，无需编辑将日期转换为字符串服务器端并将其显示在列type: 'text'

Answer 2

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

Answer 3

@Lakshman 刚刚添加了 2 点的解决方案以文本格式显示

 AssignedDate: {
                title: 'Assigned Date',
                width: '15%',
                display: function (data) {
                            var nowDate = new Date(parseInt(data.record.RequestedOn.replace(/[^0-9 +]/g, '')));
                            return [nowDate.getMonth() + 1, nowDate.getDate(), nowDate.getFullYear()].join('/') + ' ' +
[nowDate.getHours(), nowDate.getMinutes(), nowDate.getSeconds()].join(':');
                        },
                create: false,
                edit: false
            },

它给你 '05/07/2019 10:52:21' 的交配日期，希望这能帮助你定制更多。

在 JTable 中显示带时间的日期

Display Date with time in JTable

jquery

asp.net-mvc

jquery-jtable