Kendo Grid DateTime 列显示不正确的日期

Posted

技术标签:

【中文标题】Kendo Grid DateTime 列显示不正确的日期【英文标题】:Kendo Grid DateTime Column Shows Incorrect Date 【发布时间】:2017-11-10 15:13:03 【问题描述】:

我有一个剑道网格,它有一个日期时间列,在从数据库中获取日期时,我们得到了正确的日期,但在显示过程中日期被改变了。例如: DB 日期是 07/06/2017,但在网站上显示时,考虑到 MM/DD/YYYY,它会更改为 06/06/2017。谁能帮我解决这个问题。我们的数据库和网站都位于纽约地区。

【问题讨论】:

你是说月份和日期是颠倒的还是从 7/6/17 变为 6/6/17? 否,在网站日期显示时减一。如果日期是 4 月 6 日,那么在网站上显示时是 4 月 5 日 时间呢?显示的时间是否与从服务器接收到的时间完全相同?如果您不显示时间,请同时显示它,因为它可以帮助您了解差异的原因。 我们只需要显示日期 .. 因为我们正在使用 Kendo.ToString(dateVar, /''mm/dd/yyyy'/);类似的东西 【参考方案1】:

Kendo UI 数据源使用 javascript Date 对象作为日期。这些对象始终处于客户端的时区,这可能会导致日期发生变化。一个可能的选择是使用 UTC 日期:

http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/utc-time-on-both-server-and-client


编辑,把链接的内容复制到这里,因为SO不喜欢链接唯一的答案

使用带有 setter 和 getter 的 ViewModel,将 DateTime Kind 显式设置为 UTC。

private DateTime birthDate;
public DateTime BirthDate

    get  return this.birthDate; 
    set 
        this.birthDate = new DateTime(value.Ticks, DateTimeKind.Utc);
    

使用DataSourcerequestEnd事件截取传入的Date字段,用时差替换。

@(html.Kendo().Grid<KendoUIMVC5.Models.Person>().Name("persons")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Events(ev=>ev.RequestEnd("onRequestEnd"))
    )
    // ...
)

<script>
    var onRequestEnd = function(e) 
        if (e.response.Data && e.response.Data.length) 
            var data = e.response.Data;
            if (this.group().length && e.type == "read") 
                handleGroups(data);
             else 
                loopRecords(data);
            
        
    

    function handleGroups(groups) 
        for (var i = 0; i < groups.length; i++) 
            var gr = groups[i];
            offsetDateFields(gr); //handle the Key variable as well
            if (gr.HasSubgroups) 
                handleGroups(gr.Items)
             else 
                loopRecords(gr.Items);
            
        
    

    function loopRecords(persons) 
        for (var i = 0; i < persons.length; i++) 
            var person = persons[i];
            offsetDateFields(person);
        
    

    function offsetDateFields(obj) 
        for (var name in obj) 
            var prop = obj[name];
            if (typeof (prop) === "string" && prop.indexOf("/Date(") == 0) 
                obj[name] = prop.replace(/\d+/, function (n) 
                    var offsetMiliseconds = new Date(parseInt(n)).getTimezoneOffset() * 60000;
                    return parseInt(n) + offsetMiliseconds
                );
            
        
    
</script>

【讨论】:

感谢您的回复,我会实施并让您知道它是否有效。 您提供的解决方案运行良好。再次感谢您。 好,我很高兴。请考虑将回复标记为答案。 抱歉,我们遇到了一个问题,即 this.groups() 不是函数。这是当我们有没有任何日期时间列要显示的网格时。 这个问题似乎与最初的讨论无关。 Grid 和 DataSource 没有 groups() 方法。你想做什么?最好发布一个单独的问题。

以上是关于Kendo Grid DateTime 列显示不正确的日期的主要内容,如果未能解决你的问题,请参考以下文章

Kendo UI Grid 使用总结

与 Kendo-ui Grid 反应 - 错误的列标题

在字段 Kendo Grid 中显示值数组

如何保存 Kendo MVC Grid 的列顺序

如何在 Kendo Grid 中隐藏列组

ForeignKey 列不选择 Kendo-Grid 中的值