JQGrid格式化时显示错误的日期

Question

我有一个使用jsonReader构建的JQGrid，其字段名为quote_date。

未设置此字段的格式时，它将显示值“ 19/04/2020 00:00:00”

未格式化字段的代码

name: 'quote_date', index: 'quote_date', width: 100, editable: true

但是，当我尝试使用JQGrid格式化程序时（我正在尝试删除试验零），网格中的日期值显示为“ 10-10-2024”！

这是我用来格式化字段的代码

name: 'quote_date', formatter: 'date', datefmt: "d-M-Y", editoptions: { dataInit: initDateEdit }, formatoptions: { srcformat: "ISO8601Long", newformat: "d-m-Y" }, index: 'quote_date', width: 100, editable: true

预期结果为“ 19/04/2020”

我已经检查了返回的JSON结果，根据以下内容是正确的。

这是我提供完整上下文的完整代码。

构建网格的代码

function LoadGrid() {
    jQuery("#jqquotes").jqGrid({
        url: '../WebService1.asmx/getDataQuotes',
        datatype: "json",
        mtype: 'POST',
        ajaxGridOptions: { contentType: "application/json" },
        serializeGridData: function (postData) {
            return JSON.stringify(postData);
        },
        jsonReader: {
            root: function (obj) {
                return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
            },
            repeatitems: false
        },
        loadComplete: function () {
            //alert("OK");

        },
        loadError: function (jqXHR, textStatus, errorThrown) {
            alert('HTTP status code: ' + jqXHR.status + '\n' +
                'textStatus: ' + textStatus + '\n' +
                'errorThrown: ' + errorThrown);
            alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
        },
        onSelectRow: showDetailsGrid,
        height: 'auto',
        //autowidth: true,
        rowNum: 30,
        rowList: [10, 20, 30],
        colNames: ['Doc ID', 'Quote #', 'Date', 'Customer'],
        colModel: [
            { name: 'docid', key: true, index: 'docid', width: 55, editable: true },
            { name: 'quote_number', index: 'quote_number', width: 90, editable: true },
            {
                name: 'quote_date', formatter: 'date', datefmt: "d-M-Y", editoptions: { dataInit: initDateEdit },
                formatoptions: { srcformat: "ISO8601Long", newformat: "d-m-Y" }, index: 'quote_date', width: 100, editable: true
                //name: 'quote_date', index: 'quote_date', width: 100, editable: true
            },
            {
                name: 'cust_name', index: 'cust_name', width: 80, align: "left", editable: true, edittype: "select",
                editoptions: {
                    value: {}
                }
            }
        ],
        pager: "#jqquotesPager",
        viewrecords: true,
        caption: "Quotes",
        gridview: true,
        loadonce: false,  //Important - Doesn't work without - might need server side paging?


    }).navGrid('#jqquotesPager', { edit: true, add: true, del: true }, // options
        {
            url: '../WebService1.asmx/modifyDataQuotes',
            closeAfterEdit: true,
            beforeShowForm: function (form) {
                $('#docid', form).attr("disabled", true);
            },
            ajaxEditOptions: { contentType: "application/json" },
            recreateForm: true,
            serializeEditData: function (postData) {
                if (postData.exercise_value === undefined) { postData.exercise_value = null; }
                return JSON.stringify(postData);
            }
        }, // edit options
        {
            url: "../WebService1.asmx/addDataQuotes",
            closeAfterAdd: true,
            beforeShowForm: function (form) {
                $('#docid', form).attr("disabled", true);
            },
            ajaxEditOptions: { contentType: "application/json" },
            recreateForm: true,
            serializeEditData: function (postData) {
                if (postData.exercise_value === undefined) { postData.exercise_value = null; }
                return JSON.stringify(postData);
            }

        },  // add options
        {
            url: "../WebService1.asmx/deleteDataQuotes",
            ajaxDelOptions: { contentType: "application/json" },
            serializeDelData: function (postData) {
                if (postData.exercise_value === undefined) { postData.exercise_value = null; }
                return JSON.stringify(postData);
            }
        },   //del options
        {
            multipleSearch: true,
            recreateFilter: true,
            closeOnEscape: true,
            overlay: false
        },  // search options
    );
}

日期选择器的代码

//Define Datepicker
$grid = $("#jqquotes"),
    initDateEdit = function (elem) {
        $(elem).datepicker({
            dateFormat: "dd-mm-yy",
            autoSize: true,
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            showWeek: true
        });
    },
    initDateSearch = function (elem) {
        var $self = $(this);
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: "dd-mm-yy",
                autoSize: true,
                changeYear: true,
                changeMonth: true,
                showWeek: true,
                showButtonPanel: true,
                onSelect: function () {
                    if (this.id.substr(0, 3) === "gs_") {
                        // call triggerToolbar only in case of searching toolbar
                        setTimeout(function () {
                            $self[0].triggerToolbar();
                        }, 100);
                    }
                }
            });
        }, 100);
    },
    numberTemplate = {
        formatter: "number", align: "right", sorttype: "number",
        editrules: { number: true, required: true },
        searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }
    };

我已经花了大约半天的时间，但是我一生无法弄清发生了什么事。

任何帮助表示赞赏。

Answer 1

来自数据源的srcformat和实际格式中的设置不正确。根据定义， ISO8601Long 的描述如下：

ISO8601Long:"Y-m-d H:i:s",

请参见here

您的源数据格式为d / m / Y H：i：s，这是完全不同的。为了使它起作用，请像这样设置它：

        ...
        {
            name: 'quote_date', formatter: 'date', datefmt: "d-m-Y", editoptions: { dataInit: initDateEdit },
            formatoptions: { srcformat: "d/m/Y H:i:s", newformat: "d-m-Y" }, index: 'quote_date', width: 100, editable: true
        },

请注意，如果您想删除尾随的零，我已经更改了datefmt和newformat。这将与您的日期选择器设置兼容