CODEWITHSUNDEEP
javascriptasp.net-mvc
caitlinp
caitlinp

Reputation: 183

Date comparison on input, client side MVC

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" [email protected] 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" [email protected] type="text" actual="1" value='@(item.End_Date == null ? "" : Convert.ToDateTime(item.End_Date).ToString("MM-dd-yyyy"))' readonly="readonly" /></td>

Upvotes: 0

Views: 102

Answers (1)

Nur Hossen
Nur Hossen

Reputation: 31

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" [email protected] type="date" actual="1" value='@(item.Start_Date == null ? "" : Convert.ToDateTime(item.Start_Date).ToString("MM-dd-yyyy"))' readonly="readonly" />

Upvotes: 1

Related Questions