从Kendo网格内部的Kendo DatePicker中选择的日期格式 [英] Format of date selected from Kendo DatePicker Inside Kendo Grid

查看:94
本文介绍了从Kendo网格内部的Kendo DatePicker中选择的日期格式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有通过Jquery生成的kendo网格.我里面有一个日期列,它是可编辑的.编辑正确进行,一旦我在数据选择器中选择了日期,问题就出在数据格式化上.

I have kendo grid that i generated through Jquery. I have a date column inside it which is editable . Editing is happening properly , the problem is with formatting of data once I select the date in the datapicker.

网格:

 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,我希望使用与编辑前相同的格式.

Suppose earlier the format of the column was mm/dd/yyyy after editing when the datepicker goes off I want the same format as it was before editing.

我的编辑器模板的代码:

Code of my editor template:

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

动作快照下方:

之前(报价截止日期)

Befor Editing:(Quote Due Date)

编辑后:

现在,您可以看到格式的差异,我想要编辑之前的日期格式.请提供解决方案.

Now You can see the difference in the format, I want the format of the date as it was before editing. Kindly provide a solution.

推荐答案

我可以在您的代码中看到您有一个名为列列表的变量.我不完全知道"Quote Due"一栏是如何声明的,因此我只是在这里使用常识和经验.

I can see in your code that you have a variable called column list. I don't know exactly how the "Quote Due" column is declared, so I'm just using common sense and experience here.

首先,您必须确保模式定义知道"Quote Due"列的类型为date.然后,在 columnList 内,您必须为所讨论的列指定格式.

First, you have to make sure the schema definition knows that the column for "Quote Due" is of type date. Then, inside of columnList, You have to specify the format to the column in question.

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

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

See http://docs.telerik.com/kendo-ui/getting-started/framework/globalization/dateformatting for how to define your custom date format. You will make it match the format of your date picker.

这篇关于从Kendo网格内部的Kendo DatePicker中选择的日期格式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆