Kendo MVC UI网格-将空字符串显示为Date以表示null或默认日期(1900-01-01 00:00:00.000)

时间:2019-06-28 04:17:34

标签: datetime kendo-ui telerik kendo-grid kendo-asp.net-mvc

网格中有两个日期列,我试图将空字符串设置为null或默认日期。

columns.Bound(p => p.DateCreated).Format("{0:dd/MM/yyyy HH:mm}").Filterable(false).Width(120);
columns.Bound(p => p.LastLogIn).Format("{0:dd/MM/yyyy HH:mm}").Filterable(false).Width(120);

两个字段在Model类中都可以为空。

public DateTime? DateCreated { get; set; }
public DateTime? LastLogIn { get; set; }

在SQL Server表中,两列均为DATETIME,但值均为

DateCreated = 1900-01-01 00:00:00.000
LasLogIn = NULL

调试模式下的值

enter image description here

但是Grid对于LastLogIn显示空字符串,对于DateCreated显示1899年12月31日

enter image description here

所以我在ClientTemplate上添加了DateCreated以格式化日期

columns.Bound(p => p.DateCreated).Format("{0:dd/MM/yyyy HH:mm}").Filterable(false).ClientTemplate("#=formatDate(DateCreated)#").Width(120);

案例1: 如显示1899年1月31日,修改了https://www.telerik.com/forums/date-clienttemplate-and-editortemplatename-for-nullable-or-0-dates

中的功能
function formatDate(_date) {
    console.log("Input " + _date);
    var formated1900 = kendo.format("{0:d}", new Date(1900, 0, 1));
    console.log("formated1900 " + formated1900);
    var formated1899 = kendo.format("{0:d}", new Date(1899, 12, 31));
    console.log("formated1899 " + formated1899);
    var formatedDate = kendo.format("{0:d}", _date);
    console.log("formated Input " + formatedDate);
    if (formated1900 == formatedDate || formated1899 == formatedDate) {
        console.log("True " + formatedDate);
        return "";
    }
    else {
        console.log("False " + formatedDate);
        return kendo.format("{0:dd/MM/yyyy HH:mm}", _date);
    }
}

案例1的控制台输出

Input Sun Dec 31 1899 22:55:25 GMT+0655 (Singapore Standard Time)
formated1900 1/1/1900
formated1899 1/31/1900
formated Input 12/31/1899
False 12/31/1899

案例2 由于格式为1/31/1900,我再次将功能修改为

function formatDate(_date) {
    console.log("Input " + _date);
    var formated1900 = kendo.format("{0:d}", new Date(1900, 0, 1));
    console.log("formated1900 " + formated1900);
    var formated1899 = kendo.format("{0:d}", new Date(1900, 1, 31));
    console.log("formated1899 " + formated1899);
    var formatedDate = kendo.format("{0:d}", _date);
    console.log("formated Input " + formatedDate);
    if (formated1900 == formatedDate || formated1899 == formatedDate) {
        console.log("True " + formatedDate);
        return "";
    }
    else {
        console.log("False " + formatedDate);
        return kendo.format("{0:dd/MM/yyyy HH:mm}", _date);
    }
}

案例2的控制台输出

Input Sun Dec 31 1899 22:55:25 GMT+0655 (Singapore Standard Time)
formated1900 1/1/1900
formated1899 3/3/1900
formated Input 12/31/1899
False 12/31/1899

由于kendo.format返回的日期不同,因此无法为DateCreated设置空字符串。

还有其他解决此问题的方法吗?

谢谢。

1 个答案:

答案 0 :(得分:0)

请尝试使用datepicker的EditorTemplate

@(Html.Kendo().DatePicker()
              .Name("Name")
              .HtmlAttributes(new { style = "width:100%", data_format = "dd-MMM-yyyy" })
              .Events(e =>
                           {
                                e.Change("ChangeFunction");
                            }
                       )
               )

请尝试使用客户端模板以获得更明确的解决方案