从Date1中的元素看不到日期值

时间:2018-10-22 18:26:36

标签: javascript jquery html asp.net-mvc

我正在尝试比较从数据库中提取的两个日期。我正在ASP.NET mvc中完成所有这些工作。

这是我的Model课:

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">

这是Google chrome控制台显示的内容: 控制台:

Console

显示

Date2 ,但 Date1 保留为空白,因此if语句始终跳过第一个条件并直接转到else条件。我只想比较这两个日期,但似乎无法获取 Date1 的日期值。有什么解决办法吗?

1 个答案:

答案 0 :(得分:0)

您的代码有一些问题。首先,您已经在foreach循环中对Id属性值进行了硬编码,这将为多个元素创建相同的ID值。

由于要在循环中渲染多个项目,因此应考虑使用相对方法,例如closestfind。我还将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元素中的change事件,使用2个日期值,从这些字符串创建Date对象,然后进行检查。 / p>

$(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");
        }
    });
});