jQuery validation to compare start and end date

Question

I have two fields. One for person_start_date and another for person_end_date. Both has three separate fields for year, month, date. I would like to validate like Person end date > Person start date. Thanks in advance.

html.erb

<%= datetime_select :person_start_date %>


   <select id="person_start_date_1i" name="person[start_date(1i)]"> ... </select>
   <select id="person_start_date_2i" name="person[start_date(2i)]"> ... </select>
   <select id="person_start_date_3i" name="person[start_date(3i)]"> ... </select>

html.erb

<%= datetime_select :person_end_date %>


  <select id="person_end_date_1i" name="person[end_date(1i)]"> ... </select>
  <select id="person_end_date_2i" name="person[end_date(2i)]"> ... </select>
  <select id="person_end_date_3i" name="person[end_date(3i)]"> ... </select>

What sort of values (e.g. 01, 1, Jan, January)? Which select is which (e.g. is person_start_date_1i the day, month or year)? — RobG, Nov 18 '13 at 06:02
Here I can add only jQuery validator add method to validate. I can add any alert. So what I am searching for names to validate the fro and to fields with all the hints — Sam, Nov 18 '13 at 07:11

score 5 · Accepted Answer · answered Nov 18 '13 at 06:26

Here is a suggestion :

var startDate = new Date(
    $('#person_start_date_1i').val(),
    $('#person_start_date_2i').val() - 1,
    $('#person_start_date_3i').val()
);
var endDate = new Date(
    $('#person_end_date_1i').val(),
    $('#person_end_date_2i').val() - 1,
    $('#person_end_date_3i').val()
);
if (endDate > startDate) {
    // do something
}

score 4 · Answer 2 · answered Nov 18 '13 at 06:05

If you have year, month and day values as numbers (they can be Type number or string), you can create a Date like:

var dStart = new Date(year, --month, day);

Note that for calendar month 1 the javascript month number is 0 (zero) as months are zero indexed, hence --month.

and you can compare two dates directly:

if (dEnd < dStart) {
  // end is before start
}

score 2 · Answer 3 · edited May 23 '17 at 12:23

2

I think either of these links should answer your question in general:

validate end date equal to greater than start date

Validate that end date is greater than start date with jQuery

UPDATE:

This link describes exactly your question and gives a good solution for it

jQuery validate date field for seperate year, month, date

edited May 23 '17 at 12:23

Community

1
1

answered Nov 18 '13 at 06:02

Ulugbek

164
1
8

You can retrieve values of months, date, and year from input fields (select dropdowns) and construct a Date object in JQuery, then use the above links to validate them. – Ulugbek Nov 18 '13 at 06:06

score 1 · Answer 4 · answered Nov 18 '13 at 06:34

1

http://jsfiddle.net/GGsMx/

cant get simpler than this..

var date1 = Date.parse("2012-11-18");
var date2 = Date.parse("2011-11-18");
if (date1 > date2) {
    alert ("Error!");
}
else{
    alert("correct")
}

answered Nov 18 '13 at 06:34

HIRA THAKUR

17,189
14
56
87

score 0 · Answer 5 · answered Jun 05 '14 at 04:15

The important aspect is that such comparison fails because of date format used. Mostly it works with mm-dd-yyyy format because PC have same regional settings and it looks like correct format, however thats not the case. For compatibility various languages/platforms keep dates in year-month-date format. Hence, it is best to explicitly convert date to yyyy-mm-dd format and do the conversion, specially when you are using dd-mm-yyy (Aus or European format).

jQuery validation to compare start and end date

5 Answers5