看不到 Date1 中 <td> 元素的日期值

Question

我正在尝试比较从数据库中提取的两个日期。我在 ASP .NET mvc 中做这一切。

这是我的模型类：

public DateTime? Date1{ get; set; }
public DateTime? Date2 { get; set; }

控制器：

public ActionResult 
   {
      Hello test = new Hello();
      return View(test.getStuff());
    }

观看次数：

 @foreach (var item in Model)
   {
    <td id="date1"> @Html.EditorFor(x => item.Date1)</td>
    <td id="date2">@Html.DisplayFor(x => item.Date2)</td>
   }

   <script type="text/javascript">

    $(document).ready(function () {
        $("td#date1").bind("change", function () {
            var cur_td = $(this).parent("tr#home");
            var date2 = cur_td.find("td#date2").text();
            console.log(date2);
            var date1 = cur_td.find("td#date1").text(); // I don't understand why this is null? 
            console.log(date1);

            if (date1 > date2) {
                alert("Outside of the Editor Box");
            } else {
                alert("Date ok");
            }
     });
});

HTML：

<input class="text-box single-line" data-val="true" data-val-date="The field date1 must be a date." id="item_date1" name="item.Date1" type="date" value="2017-03-31">

<input class="text-box single-line" data-val="true" data-val-date="The field date1 must be a date." id="item_date1" name="item.Date1" type="date" value="2017-04-20">

这是谷歌浏览器控制台吐出的内容： 控制台：

Date2 已显示，但 Date1 保持空白，因此 if 语句总是跳过第一个条件并直接进入 else 条件。我只想比较这两个日期，但我似乎无法获得 Date1 的日期值。有什么解决方法吗？

Answer 1

您的代码存在一些问题。首先，您在 foreach 循环中硬编码了 Id 属性值，这将为多个元素创建相同的 Id 值。

由于您在循环中渲染多个项目，因此您应该考虑使用 closest 和 find 等相关方法。我还将 tds 包装在一个父元素中，您可以在使用相关方法时使用它来限制范围。

我删除了Id 属性，并为每个 tds 提供了一个简单的 date1 和 date2 属性

<table>
    @foreach (var item in Model)
    {
        <tr>
            <td date1> @Html.EditorFor(x => item.Date1)</td>
            <td date2>@Html.DisplayFor(x => item.Date2)</td>
        </tr>
    }
</table>

现在在您的脚本中，您可以使用此属性来监听 input 元素中的更改事件，使用 2 个日期值，从这些字符串创建 Date 对象并进行检查。

$(document).ready(function () {
    $("td[date1] > input").bind("change", function () {

        var $tr = $(this).closest("tr");
        var date1 = $(this).val();
        var date2 = $tr.find("td[date2]").text();

        // Make sure to check date1 and date2 for empty string before trying to parse

        var d1 = Date.parse(date1);
        var d2 = Date.parse(date2);

        if (d1 > d2) {
            console.log("Outside of the Editor Box");
        } else {
            console.log("Date ok");
        }
    });
});