Формат даты, выбранный из Kendo DatePicker Inside Kendo Grid

Question

У меня есть сетка кендо, которую я создал через 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 
       }, 
      }); 

Предположим ранее формат колонки составлял мм/дд/гггг после редактирования, когда DatePicker погасла я хочу такой же формат, как это было до редактирования.

код моего шаблона редактора:

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

Ниже защелками из действий:

Befor Редактирование: (Quote Due Date)

После редактирования:

Теперь вы можете видеть разницу в формате, я хочу формат даты, как это было до редактирования. Просьба предоставить решение.

Answer 1

В вашем коде я вижу, что у вас есть переменная, называемая списком столбцов. Я точно не знаю, как объявлен столбец «Quote Due», поэтому я просто использую здравый смысл и опыт здесь.

Во-первых, вы должны убедиться, что определение схемы знает, что столбец «Quote Due» имеет дату типа. Затем внутри columnList, вы должны указать формат для соответствующей колонки.

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

См http://docs.telerik.com/kendo-ui/getting-started/framework/globalization/dateformatting о том, как определить свой собственный формат даты. Вы сделаете так, чтобы он соответствовал формату вашего выбора даты.

Answer 2

@Nitin: Вы сказали, что ваша сетка доступна для редактирования. В этом случае, как вы обновляете свои данные; Я не мог видеть объявление обновления в разделе data> source.

В любом случае, указанная проблема возникает, когда вы получаете отформатированную дату из бэкэнд (например, dd/MM/yyyy hh: mm: ss tt), редактируете дату в дате date kicky и обновляете значение, но забыли сообщить браузеру, как для разбора/форматирования даты.

Предполагаю, что ваш язык установлен на «en-US». Поэтому, когда вы редактируете дату, вам нужно указать то же самое. Это решит вашу проблему. Если вы читаете значение datepicker в консоли браузера, вы получите что-то вроде второго изображения. Поэтому используйте следующее:

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

В противном случае вы можете использовать kendo.toString(), чтобы сообщить кендо DatePicker как разобрать дату. Подробности можно найти: here. Я предоставил подобное решение в here на StackOverflow. Пожалуйста, дайте мне знать, если это поможет. Благодарю.