使用 Kendo 网格中的函数格式化日期类型

Question

我有一个日期转换函数，它接受一个 datetime 参数和 returns string。我如何使用此函数来格式化 Kendo 网格中的 Date 列？

我尝试了以下代码，none 成功了

columns.Bound(x => x.ModifyDate).ClientTemplate(@Utility.GetPersianDate((DateTime)"#: ModifyDate #"));

columns.Bound(x => x.ModifyDate).Template(@<text>@Utility.GetPersianDate((DateTime)@item.ModifyDate)</text>);

columns.Bound(x => x.ModifyDate).Format(@Utility.GetPersianDate(Convert.ToDateTime("#: ModifyDate")));

我也试过在服务器端转换它，但这是不可能的，因为格式化的日期不被识别为有效日期。这并不重要，因为它只是为了展示。用户不应更改或输入该日期。如果没有任何效果，我可能会考虑使用 string 而不是 DateTime 并在服务器上转换它。

Answer 1

实际上你可以使用 Kendo 它自己的 parse/format 功能，简单来说就是：

@(Html.Kendo().Grid(Model.dummyHistoryList)
                .Name("Grid")
                .Columns(columns =>
                {
                   columns.Bound(model => model.dueDate).ClientTemplate("#= kendo.toString(kendo.parseDate(dueDate),'dd MMM yyyy') #");
                   columns.Bound(model => model.DueItem);
                   columns.Bound(model => model.dueAmount).Format("{0:#,##0.00}").HtmlAttributes(new { style = "text-align:right" });
                })
                .Pageable()
                //and so on....
                )

要覆盖 JQuery 验证：

<script type="text/javascript">
    jQuery(function ($) {
        $.validator.addMethod('date',
        function (value, element) {
            if (this.optional(element)) {
                return true;
            }

            var ok = true;
            //Here I use kendo parse to validate the format
            //you want or you can make your own/implement your
            //validation code below here. (Example)
            if ((kendo.parseDate(value, "dd/MM/yyyy")) == null){
                ok = false;
            }
            //END
            return ok;
        });
    });
</script>

读取附加格式到 KendoUI DatePicker。只需添加 parseFormat:

.ParseFormats(new List<string> { "yyyy-MM-dd", "MM-dd-yyyy", "dd-MM-yyyy" })//So On...

Answer 2

您的代码不起作用的原因有多种。

columns.Bound(x => x.ModifyDate).ClientTemplate(@Utility.GetPersianDate((DateTime)"#: ModifyDate #"));

这不起作用，因为服务器代码先运行，所以 "#: ModifyDate #" 无法转换为 DateTime。应该是InvalidOperationException什么的。

columns.Bound(x => x.ModifyDate).Template(@<text>@Utility.GetPersianDate((DateTime)@item.ModifyDate)</text>);`

由于奇怪的 Template 调用，第二行无法正常工作。应该这样称呼：.Template(item => Utility.GetPersianDate(item.ModifyDate)) 它会完成这项工作，除非你使用 Ajax 绑定，在这种情况下你不能使用 Template 方法。

columns.Bound(x => x.ModifyDate).Format(@Utility.GetPersianDate(Convert.ToDateTime("#: ModifyDate")));`

第三行不起作用，因为 Format 应该像 Format("{0:D}") 一样调用，并且它不能接受任何其他参数。

因此，如果您不使用 Ajax 绑定，正确的 Template 调用应该可以解决问题。如果这样做，那么您可以在服务器端转换它或编写一个 Javascript 函数将日期转换为波斯语并在 ClientTemplate 中调用它，如下所示：.ClientTemplate("# convertToPersian(ModifyDate) #")

我个人建议您像这样在服务器端执行此操作：

public class SomeView
{
  public DateTime ModifyDate { get; set; }

  public string ModifyDatePersian { get { return Utility.GetPersianDate(ModifyDate); } }
}

并像这样在客户端使用它：.ClientTemplate("#: ModifyDatePersian) #").

使用 Kendo 网格中的函数格式化日期类型

Format Date type using a function in Kendo Grid

kendo-ui

kendo-grid

kendo-asp.net-mvc