kendo ui网格数据源过滤日期格式 [英] kendo ui grid datasource filter date format
本文介绍了kendo ui网格数据源过滤日期格式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
显示字段时，我使用模板以英文日期格式dd / MM / yyyy显示日期。
问题是过滤时，我不知道如何显示英国格式的日期过滤器。
我遇到的另一个问题是没有datetime键入，只是日期，所以只能按日期而不是datetimes过滤。
任何帮助或想法将不胜感激。
这是部分视图（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.f ilters [i] .value = kendo.toString（options.filter.filters [i] .value，MM / dd / yyyy）;
}
}
}
返回选项;
}
}，
模式：{
data：'Data'，
total：'Count'，
model：{
id ：'id'，
fields：{
Id：{type：'number'}，
开始：{type：'date'}，
End：{type：日期'}，
分配：{type：'number'}
}
}
}，
sort：{
field：开始
dir：asc
}，
过滤器：{
逻辑：和，
过滤器：[
{
字段： 结束，
运算符：gt，
值：dateString
}
]
}
}）;
$（'＃account-allocation'）。kendoGrid（{
height：383，
dataSource：dataSource，
columns：[
{
字段：'开始'，
标题：'开始日期'
模板：'＃= kendo.toString（开始，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
{
字段：'Id'，
过滤器：false，
标题：'Actions'，
template：'< a class = link-lightboxhref =@ Url.Action（AccountTypeController.UpdateAllocationAction1，Acco untitleController.Name）/＃= Id＃>< img src =@ Url.Content（〜/ Content / img / grid-update.png）alt =更新/>< / a& ;'，
width：75
}
]，
可过滤：true，
可排序：false，
可滚动：false，
可页面：true
}）;
< / script>
< div class =panel panel-w>
< h2> @ Model.Name分配
< a href =@ Url.Action（AccountTypeController.SetAllocationAction1，new {id = Model.Id}）class =button link-lightbox >< span class =edit>设置帐户类型分配< / span>< / a>
< / h2>
< div id =account-allocation>< / div>
< / div>
解决方案
首先包括对应于英文文化的JavaScript文件：
< script src =http://cdn.kendostatic.com/2012.2.710/js/cultures/kendo。 culture.en-GB.min.js>< / script>
然后调用 kendo.culture 设置当前文化：
kendo.culture （en-GB）;
Kendo Grid会自动使用'dd / MM / yyyy'格式。
有关Kendo UI如何处理全球化的更多信息，请参见文档。
这是一个现场演示： http://jsbin.com/onetol/1/edit
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>
解决方案
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
这篇关于kendo ui网格数据源过滤日期格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
