JQGrid отображает неправильную дату при форматировании

Question

У меня есть JQGrid, созданный с использованием jsonReader, с полем с именем 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
    );
}

Код для DatePicker

//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",

См. здесь

Ваш исходный формат данных д / м / ГЧ: i: с, что совсем другое. Чтобы это работало, установите его так:

        ...
        {
            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 на случай, если вы хотите удалить конечные нули. Это будет совместимо с вашими настройками DatePicker