Date comparison on input, client side MVC

Question

I have a function that compares 2 dates, Start_Date and End_Date . If the start date is greater then the end date, alert a message saying "The start date exceeds End Date. Please check the date and re-enter it." Also, this should be compared right after a click away from the text box.

The below code doesn't seem to be doing justice. Any suggestions?

JS Code:

 $("td[start] > input").on("change", function () {
                alert("here first");
                var cur_td = $(this).closest("tr");
                var startdate = $(this).val();
                var enddate = cur_td.find("td[end]").text();
                var d1 = Date.parse(startdate);
                var d2 = Date.parse(enddate);
                checkdates(d1, d2);
            });
 function checkdates(s_date, e_date) {
                if (s_date > e_date) {
                    alert("The date " + s_date + " exceeds End Date. Please check the date and re-enter it.");
                }
            }

Razor View:

<td start><input class="start" id=@item.ID type="text" actual="1" value='@(item.Start_Date == null ? "" : Convert.ToDateTime(item.Start_Date).ToString("MM-dd-yyyy"))' readonly="readonly" /></td>

<td end><input class="end" id=@item.ID type="text" actual="1" value='@(item.End_Date == null ? "" : Convert.ToDateTime(item.End_Date).ToString("MM-dd-yyyy"))' readonly="readonly" /></td>

Answer 1

You try 'keyup' instead of 'change.

$("td[start] > input").on("keyup", function () { })

or if you want to use on('change'), then you must use input type date or any date-picker.like

<input class="start" id=@item.ID type="date" actual="1" value='@(item.Start_Date == null ? "" : Convert.ToDateTime(item.Start_Date).ToString("MM-dd-yyyy"))' readonly="readonly" />