Format of date selected from Kendo DatePicker Insi

Question

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.

Grid:

 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
                },
            });

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" })

Below the snaps of the actions:

Befor Editing:(Quote Due Date)

After Editing:

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.

Answer 1

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.

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}"
}

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.

Answer 2

@Nitin: You have said your grid is editable. In that case how do you update your data; I couldn't see any update declaration in datasource > transport section.

Anyway, the specified problem occurs when you get a formatted date from backend (e.g. dd/MM/yyyy hh:mm:ss tt), edit the date in kendo datepicker and update the value but forgot to tell the browser how to parse/format the date.

I assume your locale is set to "en-US". So when you EDIT the date you need to specify the same. This will solve your problem. If you read a datepicker value in browser console you will get something like your second picture. So use the following:

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

Otherwise you can use kendo.toString() to tell kendo datepicker how to parse your date. The details can be found here. I've provided similar kind of solution in here on StackOverflow. Please let me know if this helps. Thanks.