KendoUI Grid Filter Date Format

Question

In my kendo grid, I want to change the date format in the filter

Ex: 1/30/2015 to January 30, 2015

I have already changed the start date date format

field: "StartDate", title: "Start Date", width: 30, format: "{0:MMM dd, yyyy}", parseFormats: "{0:MM/dd/yyyy}", headerTemplate: '<label for="check-all"><b>Start Date</b></label>', headerAttributes: { style: "text-align: center;" }, attributes: { style: "text-align:center !important;padding-right: 25px;" } 

Code in my filtered

  filterable: { extra: false, operators: { string: { startswith: "Starts with", eq: "Is equal to" } } }, 

For a screenshot see this

thanks

Answer 1

You must define filterable.ui as the function in which you create the DatePicker and set the desired format :

 { field: "StartDate", title: "Start Date", width: 30, format: "{0:MMM dd, yyyy}", parseFormats: "{0:MM/dd/yyyy}", headerTemplate: '<label for="check-all"><b>Start Date</b></label>', headerAttributes: { style: "text-align: center;" }, attributes: { style: "text-align:center !important;padding-right: 25px;" }, filterable : { ui: function (element) { element.kendoDatePicker({ format: "MMM dd, yyyy" }); } } }, 

Check out the following snippet:

 $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" }, schema: { model: { fields: { OrderID: { type: "number" }, Freight: { type: "number" }, ShipName: { type: "string" }, OrderDate: { type: "date" }, ShipCity: { type: "string" } } } }, pageSize: 20, serverPaging: true, serverFiltering: true, serverSorting: true }, height: 550, filterable: true, sortable: true, pageable: true, columns: [ { field:"OrderID", filterable: false }, { field: "OrderDate", title: "Order Date", format: "{0:MMM dd, yyyy}", parseFormats: "{0:MM/dd/yyyy}", headerTemplate: '<label for="check-all"><b>Start Date</b></label>', headerAttributes: { style: "text-align: center;" }, attributes: { style: "text-align:center !important;padding-right: 25px;" }, filterable : { ui: function (element) { element.kendoDatePicker({ format: "MMM dd, yyyy" }); } } }, "ShipName" ] }); }); 

 html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; } 

 <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" /> <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script> <div id="grid"></div> 

Answer 2

The provided solution works fine with the default "Menu Filters". But it doesn’t work for filtering: {mode: "row"}. In this case you should use a template.

  $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" }, schema: { model: { fields: { OrderID: {type: "number"}, Freight: {type: "number"}, ShipName: {type: "string"}, OrderDate: {type: "date"}, ShipCity: {type: "string"} } } }, pageSize: 20, serverPaging: true, serverFiltering: true, serverSorting: true }, height: 550, // filterable: true, sortable: true, pageable: true, columns: [ { field: "OrderID", filterable: false }, { field: "OrderDate", title: "Order Date", format: "{0:MMM dd, yyyy}", parseFormats: "{0:MM/dd/yyyy}", headerTemplate: '<label for="check-all"><b>Start Date</b></label>', headerAttributes: {style: "text-align: center;"}, attributes: {style: "text-align:center !important;padding-right: 25px;"}, filterable: { cell: { template: function (args) { args.element.kendoDatePicker({ format: "MMM dd, yyyy" }); } } } }, "ShipName" ], filterable: {mode: 'row'} }); 

Answer 3

I received a response from Telerik support for KendoUI Professional 2016.3.1118. Add this to your grid:

 columnMenu: true, columnMenuInit: function (e) { var menu = e.container.find(".k-menu").data("kendoMenu"); menu.bind('activate', function(ev) { if(ev.item.is(':last-child')) { // use 'span.k-dropdown.k-header' if the column is locked // if an element in the submenu is focused first, the issue is not observed (menu disappearing) ev.item.find('span.k-dropdown.k-header').first().focus(); // column field is of type "date" if(e.field === "OrderDate") { // accessing the DatePickers and setting the custom format var datePickerElements = ev.item.find('[data-role="datepicker"]'); datePickerElements.each(function(idx, input) { var datePicker = $(input).data('kendoDatePicker'); datePicker.setOptions({ format: 'MMM dd, yyyy' }); }); } } }); },