Question

我在我的MVC应用程序中使用JTable（第一次）并希望显示需要显示日期和时间的Datetime列。我能够显示日期。以下是JTable定义中列的外观。

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

我如何显示时间？我知道我需要更改类型和displayFormat - 但不知道要改变它们的内容。

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>

Answer 2

以下是选项：

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

Answer 3

只需添加一个解决方案即可将两点显示为@Lakshman的文本格式

 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中显示日期和时间

3 个答案: