kendo ui网格数据源过滤日期格式 [英] kendo ui grid datasource filter date format
问题描述
显示字段时,我使用模板以英文日期格式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屋!