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

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