kendo ui 网格数据源过滤器日期格式

Posted 2023-02-26

【中文标题】kendo ui 网格数据源过滤器日期格式

【英文标题】：kendo ui grid datasource filter date format

【发布时间】：2012-11-14 23:01:12

【问题描述】：

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

我遇到的另一个问题是没有日期时间类型，只有日期，所以只能按日期而不是日期时间过滤。

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

这是局部视图（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")" /></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>

【问题讨论】：

另外，你可以试试看这里：***.com/questions/28232575/…

【参考方案1】：

首先包含对应英语文化的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 如何处理全球化的更多信息，请参阅documentation。

这是一个现场演示：http://jsbin.com/onetol/1/edit