比较剑道 HTML 网格客户端模板中的日期

Question

我需要能够在Kendo HTML Grid的客户端模板中正确比较两个日期。 这是我所拥有的：

@(Html.Kendo().Grid<TfInvoicesReturnModel>()
.Name("invoiceGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("OrderDate").Descending())
.Read(read => read.Action("Invoices_Read", "Jobs", new { JobNo = Model.JobNo, CustomerNo = Model.CustomerId }))
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.InvoiceNo);
})
)
.Columns(columns =>
{
columns.Bound(p => p.InvoiceNo).ClientTemplate(
"#if(BalanceDue > 0 && DueDate < " + @CurDate + ") {# " +
"<span style='color:red; font-weight:bold'>#: InvoiceNo #</span>" +
"#} else {#" +
"#: InvoiceNo #" +
"#} #"
).Title("Invoice").Width(125);  ...

其中@CurDate是视图中的变量：

String CurDate = DateTime.Now.ToShortDateString();

当我运行这个时，CurDate 是正确的。 但是，当然，比较无法正常工作，因为DueDate的格式不同。 我怎样才能做到这一点？

Answer 1

您可以通过将日期格式化为所需的格式来实现此目的。

https://docs.telerik.com/kendo-ui/framework/globalization/dateformatting 方法如下：

kendo.toString(new Date(DueDate), "g") // for -> 11/6/2018 12:00 AM

Answer 2

有 2 个选项。

1(您可以在服务器上计算条件并将bool变量传递给客户端，因此您的模板将是这样的：

"#if(DateCheck) {# " +
"<span style='color:red; font-weight:bold'>#: InvoiceNo #</span>" +
"#} else {#" +
"#: InvoiceNo #" +
"#} #"

和行动"Invoices_Read"：

...
.Select(w => new TfInvoicesReturnModel
{
...
DateCheck = w.BalanceDue > 0 && w.DueDate < DateTime.Now.Date
...
})
...

2(您应该使用doc中的kendo.parseDate((方法将DateTime属性转换为JS日期，以比较客户端的日期，因此您的模板将是这样的：

"#if(BalanceDue > 0 && DueDate < kendo.parseDate(" + @CurDate + ", YOUR_FORMAT)) {# " +
"<span style='color:red; font-weight:bold'>#: InvoiceNo #</span>" +
"#} else {#" +
"#: InvoiceNo #" +
"#} #"

Answer 3

这是最终有效的代码：

columns.Bound(p => p.DueDate).ClientTemplate(
"#if(BalanceDue > 0 && new Date(DueDate) < getTodaysDate()) {# " +
"<span style='color:red; font-weight:bold'>#: kendo.toString(new Date(DueDate), 'MM/dd/yyyy') #</span>" +
"#} else {#" +
"#: kendo.toString(new Date(DueDate), 'MM/dd/yyyy') #" +
"#} #"
).Title("Due Date");

这是在脚本部分中获取今天日期的功能：

function getTodaysDate()
{
return new Date();
}