KendoUI grid filter date format

Question

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

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

I already change the date format of Start Date

                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 filterable

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

For screenshot see this

Thanks

Answer 1

You should define filterable.ui as a function where 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 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 default 'Menu filters' But not working for filterable: {mode: "row"}. In that case you should use 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 got this response from Telerik's 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'
                    });
                });
            }
        }
    });
},