kendo ui grid数据源过滤日期格式 [英] kendo ui grid datasource filter date format

问题描述

我在数据源中有一个带有日期字段的剑道网格.显示字段时，我使用模板以英国日期格式dd/MM/yyyy"显示日期.问题是过滤的时候，不知道英国格式的日期过滤器怎么显示.

我遇到的另一个问题是没有日期时间类型，只有日期，因此只能按日期而不是日期时间进行过滤.

任何帮助或想法将不胜感激.

这是局部视图(cshtml)

<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><div id="账户分配"></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 grid数据源过滤日期格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！