日期的格式从剑道的DatePicker内部剑道电网选择(Format of date selecte

2019-11-02 20:39发布

我有过的Jquery产生剑道网格。 我在它里面一个日期列是编辑。 编辑正在发生的事情正确,问题是数据的格式,一旦我选择在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。

我的编辑模板的代码:

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

下面的动作的捕捉:

Befor编辑:(报价截止日期)

编辑后:

现在,你可以看到的格式不同,我想日期的格式,因为它是在编辑之前。 请提供一个解决方案。

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),编辑在剑道日期选择器的日期和更新的价值,但忘了告诉浏览器如何解析/格式日期。

我假设你的位置设置为“en-US”。 所以,当你编辑的日期,你需要指定相同。 这将解决您的问题。 如果你在阅读浏览器控制台一个datepicker值,你会得到一些你的第二张照片。 因此,使用以下命令:

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

否则,你可以使用kendo.toString()来告诉剑道日期选择器如何解析你的约会。 细节可以发现在这里 。 我已经提供了类似的一种解决方案在这里在计算器上。 请让我知道这可不可以帮你。 谢谢。



文章来源: Format of date selected from Kendo DatePicker Inside Kendo Grid