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

Posted 2023-05-07

【中文标题】从 Kendo DatePicker Inside Kendo Grid 中选择的日期格式

【英文标题】：Format of date selected from Kendo DatePicker Inside Kendo Grid

【发布时间】：2014-02-17 10:23:09

【问题描述】：

我有通过 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" )

在动作快照下方：

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

编辑后：

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

【问题讨论】：

剑道网格声明在哪里？

我已经更新了我的问题

【参考方案1】：

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

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

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

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

【参考方案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。我在 *** 上的 here 中提供了类似的解决方案。请让我知道这可不可以帮你。谢谢。

【讨论】：

Hey Mahib 我正在 Grid DataBound 事件中进行更新，在数据库中更新时我正在将格式转换为所需的格式。当从 datepicker 中选择日期时，我的问题出现在 UI 端。我想以与以前完全相同的格式显示日期。

@NitinRawat：在您的浏览器控制台中尝试使用 $("#YourDatePickerName").data("kendoDatePicker").value().toLocaleString("en-US");和 $("#YourDatePickerName").data("kendoDatePicker").value();您自己会看到不同之处。