Geek Answers Handbook

Kendo ui date filter data filter format

I have a kendo grid with a date field in a data source. When displaying the field, I use a template to display the date in the UK date format "dd / MM / yyyy". The problem is filtering, I don’t know how to display date filter in UK format.

Another problem I am facing is the type of date, date, date, date and time.

Any help or ideas would be appreciated.

This is a 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>
+8
date filter format datasource kendo-ui
source share
1 answer

First include a JavaScript file that matches English culture:

 <script src="http://cdn.kendostatic.com/2012.2.710/js/cultures/kendo.culture.en-GB.min.js"></script>

Then call kendo.culture to set the current culture:

 kendo.culture("en-GB");

Kendo Grid automatically uses the dd / MM / yyyy format.

Further information on how the Kendo user interface works with globalization can be found in the documentation .

Here is a live demo: http://jsbin.com/onetol/1/edit

+9
source share

More articles:


All Articles