KendoUI grid filter date format
26,966
Solution 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>
Solution 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'}
});
Author by
nojla
Updated on December 17, 2020Comments
-
nojla over 3 years
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