从 Kendo DatePicker Inside Kendo Grid 中选择的日期格式

Question

我有通过 Jquery 生成的剑道网格。我里面有一个可编辑的日期列。编辑正常进行，一旦我在数据选择器中选择日期，问题就在于数据格式。

网格：

 divSearchGrid.kendoGrid({
                dataSource: {
                    transport: {
                        read: function (options) {
                            $.ajax({
                                type: "POST",
                                url: urlSearch,
                                data: paramsSearch,
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (result) {
                                    var data = result.d;
                                    if (data != null) {
                                        if (data.length > 0) {
                                            structuredData = [];
                                            for (var i = 0; i < data.length; i++) {
                                                var objStructured = {};
                                                objStructured[defaultTaskColumnAray[0]] = data[i].TaskID
                                                objStructured[defaultTaskColumnAray[1]] = data[i].TaskDescription
                                                objStructured[defaultTaskColumnAray[2]] = data[i].AssignedToName
                                                objStructured[defaultTaskColumnAray[3]] = data[i].StatusName
                                                objStructured[defaultTaskColumnAray[4]] = data[i].ServiceName
                                                var customFieldList = data[i].CustomFieldColumnGrid;
                                                if (customFieldList.length > 0) {
                                                    for (var j = 0; j < customFieldList.length; j++) {
                                                        if (customFieldList[j].ColumnType == '5' || customFieldList[j].ColumnType == '6') {
                                                            objStructured[customFieldList[j].ColumnUniqueName] = customFieldList[j].ColumnCustomFieldValueBit;
                                                        }
                                                        else {
                                                            objStructured[customFieldList[j].ColumnUniqueName] = customFieldList[j].ColumnFieldValue;
                                                        }
                                                    }
                                                }
                                                objStructured[defaultTaskColumnAray[5]] = data[i].GUID
                                                structuredData.push(objStructured)
                                            }
                                            options.success(structuredData)
                                        }
                                        else {
                                            divSearchGrid.html('<h4>No records To Display</h4>')
                                            // To stop the Auto Refresh of the grid if there are no results
                                            isEditing = true;
                                        }
                                    }
                                    else {
                                        divSearchGrid.html('<h4>Some Error Occured</h4>')
                                    }
                                }
                            })
                        }
                    },
                    schema: {
                        model: {
                            id: "GUID",
                            fields: {
                                TaskID: { editable: false, nullable: true },
                                ServiceName: { editable: false, nullable: true },
                                TaskDescription: { editable: false, nullable: true }
                            }
                        }
                    },
                    pageSize: 10
                },
                batch: true,
                edit: function (e) {

                    // To stop the Auto Refresh of the grid on edit
                    isEditing = true;
                },
                groupable: true,
                scrollable: true,
                dataBound: GridDataBound,
                sortable: true,
                reorderable: true,
                resizable: true,
                selectable: "row",
                toolbar: "<div><img id='imgExportDoc' style='margin-left:15px' onclick='ExportData(1);' title='Export in Word Format' src='images/doc-Icon.png'/><img id='imgExportExcel' onclick='ExportData(2);' style='margin-left:15px' title='Export in Excel Format' src='images/xls-Icon.png'/></div>",
                autoSync: true,
                editable: true,
                navigatable: true,
                columns: columnList,
                columnMenu: true,
                filterable: true,
                columnMenu: {
                    sortable: false
                },
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
            });

假设在日期选择器关闭时编辑后列的格式为 mm/dd/yyyy 我想要与编辑前相同的格式。

我的编辑器模板代码：

$('<input name="' + options.field + '" data-bind="value:' + options.field + '"/>')
                       .appendTo(container)
                       .kendoDatePicker({ format: "mm/dd/yyyy" })

在动作快照下方：

编辑前：（报价截止日期）

编辑后：

现在你可以看到格式的不同了，我想要编辑前的日期格式。请提供解决方案。

Answer 1

我可以在您的代码中看到您有一个名为列列表的变量。我不知道“报价到期”列是如何声明的，所以我在这里只是使用常识和经验。

首先，您必须确保架构定义知道“报价到期”列的类型是日期。然后，在 columnList 中，您必须指定相关列的格式。

{
    field: "QUOTE_DUE",
    title: "Quote Due",
    format: "{0:d}"
}

请参阅http://docs.telerik.com/kendo-ui/getting-started/framework/globalization/dateformatting，了解如何定义您的自定义日期格式。您将使其与日期选择器的格式相匹配。

Answer 2

@Nitin：你说过你的网格是可编辑的。在这种情况下，您如何更新您的数据；我在数据源 > 传输部分中看不到任何更新声明。

无论如何，当您从后端获取格式化日期（例如 dd/MM/yyyy hh:mm:ss tt），在 kendo datepicker 中编辑日期并更新值但忘记告诉浏览器如何解析/格式化日期。

我假设您的语言环境设置为“en-US”。因此，当您编辑日期时，您需要指定相同的日期。这将解决您的问题。如果您在浏览器控制台中读取 datepicker 值，您将获得类似于第二张图片的内容。所以使用以下内容：

$("#YourDatePickerName").data("kendoDatePicker").value().toLocaleString("en-US");

否则，您可以使用 kendo.toString() 告诉 kendo datepicker 如何解析您的日期。详情请见here。我在 StackOverflow 上的 here 中提供了类似的解决方案。请让我知道这可不可以帮你。谢谢。