kendoui固定宽度_KendoUI网格过滤器日期格式

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: 'Start Date',

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 screenshotsee this

Thanks

解决方案

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: 'Start Date',

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: 'Start Date',

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