kendo ui grid datasource filter date format
First include the JavaScript file corresponding to the English culture:
<script src="http://cdn.kendostatic.com/2012.2.710/js/cultures/kendo.culture.en-GB.min.js"></script>
Then invoke kendo.culture to set the current culture:
kendo.culture("en-GB");
Kendo Grid will then automatically use the 'dd/MM/yyyy' format.
More information about how Kendo UI deals with globalization can be found in the documentation.
Here is a live demo: http://jsbin.com/onetol/1/edit
Tim Blackwell
Updated on June 09, 2022Comments
-
Tim Blackwell almost 2 years
I have a kendo grid with a date field in the datasource. When displaying the field I use a template to display the date in the UK date format 'dd/MM/yyyy'. The problem is when filtering, I don't know how to display the date filter in UK format.
Another problem I am having is there is no datetime type, just date, so can only filter by dates not datetimes.
Any help or ideas would be appreciated.
This is the partial view (cshtml)
<script type="text/javascript"> $(document).ready(function() { var date = new Date(); var dateString = date.getMonth()+1 + "/" + date.getDate() + "/" + date.getFullYear(); var url = '@Url.Action(AccountTypeController.GetAllocationGridData, new {id = Model.Id})'; var dataSource = new kendo.data.DataSource({ serverPaging: true, serverSorting: true, serverFiltering: true, pageSize: 10, transport: { read: { type: 'post', dataType: 'json', url: url }, parameterMap: function(options) { if (options.filter) { for (var i = 0; i < options.filter.filters.length; i++) { if (options.filter.filters[i].field == 'Start' || options.filter.filters[i].field == 'End') { options.filter.filters[i].value = kendo.toString(options.filter.filters[i].value, "MM/dd/yyyy"); } } } return options; } }, schema: { data: 'Data', total: 'Count', model: { id: 'Id', fields: { Id: { type: 'number' }, Start: { type: 'date' }, End: { type: 'date' }, Allocation: { type: 'number' } } } }, sort: { field: "Start", dir: "asc" }, filter:{ logic: "and", filters: [ { field: "End", operator: "gt", value: dateString } ] } }); $('#account-allocation').kendoGrid({ height: 383, dataSource: dataSource, columns: [ { field: 'Start', title: 'Start Date', template: '#= kendo.toString(Start,"dd/MM/yyyy HH:mm") #' }, { field: 'End', title: 'End Date', template: '#= kendo.toString(End,"dd/MM/yyyy HH:mm") #' }, { field: 'NoSpaces', title: 'Number of Spaces', filterable: false }, { field: 'Id', filterable: false, title: 'Actions', template: '<a class="link-lightbox" href="@Url.Action(AccountTypeController.UpdateAllocationAction1, AccountTypeController.Name)/#= Id #"><img src="@Url.Content("~/Content/img/grid-update.png")" alt="Update"/></a>', width: 75 } ], filterable: true, sortable: false, scrollable: false, pageable: true }); </script> <div class="panel panel-w"> <h2>@Model.Name Allocations <a href="@Url.Action(AccountTypeController.SetAllocationAction1, new { id = Model.Id })" class="button link-lightbox"><span class="edit">Set Account Type Allocation</span></a> </h2> <div id="account-allocation"></div> </div>