Validate Date coming through popup in 2 text fields

[lee_help]

i m trying to validate two date coming in the format 'YYYY-MM-DD' coming through PopUP-Calendar in two textboxes(From Date and To Date) , but i need to validate the date i.e if the i select a date from from date then in to date the date should be greater than or equal to from date.


Plz help me....

[nap0leon]

Sample HTML and JavaScript for comparing Start Date and End Date. This also verifies that the end date is greater than today - you can remove that by removing the "endDate > today+1" line.

<div>
Start Date: <input type="text" name="startDate"  id="startDate" size="6"  value="11/30/2011"/>
<br/>End Date: <input type="text" name="endDate"  id="endDate" size="6"  value="2/15/2012"/>
<br/><a href="javascript:void(0);" onclick="javascript:ValidateDate()">Validate</a>
<script>
function ValidateDate(){
  var today = new Date();
  var startDate = new Date(document.getElementById("startDate").value);
  var endDate = new Date(document.getElementById("endDate").value);

  //check for empty values
  if (startDate ==  'Invalid Date'){ alert('You must enter a start date');return false;}
  if (endDate == ""){ alert('You must enter an end date');return false;}

  //comparing endaDate to today+1 becuase "now" it is 10am, but mm/dd/yyyy is 10 hours ago and it would fail.
  if (endDate < today+1){ alert('End date must be today or later');return false;}
  if (endDate < startDate){ alert('End date must be after the start date');return false;}
  alert('pass');
  return true;

}
</script>
</div>

[007Julien]

I am not sure that the today+1 (Tue Feb 7 15:30:45 UTC+0100 20121 !) give the right result ? The day light saving time could be an real, although well hidden, difficulty to apply your method with the following day...

[nap0leon]

Hah - good catch... I didn't test it thoroughly.

Try this one:

<div>
Start Date: <input type="text" name="startDate"  id="startDate" size="6"  value="11/30/2011"/>
<br/>End Date: <input type="text" name="endDate"  id="endDate" size="6"  value="2/15/2012"/>
<br/><a href="javascript:void(0);" onclick="javascript:ValidateDate()">Validate</a>
<script>
function ValidateDate(){
  var today = new Date();
  var startDate = new Date(document.getElementById("startDate").value);
  var endDate = new Date(document.getElementById("endDate").value);
  //check for empty values
  if (startDate ==  'Invalid Date'){ alert('You must enter a start date');return false;}
  if (endDate == ""){ alert('You must enter an end date');return false;}

  //comparing endaDate to today+1 becuase "now" it is 10am, but mm/dd/yyyy is 10 hours ago and it would fail.
  if (endDate > today){ alert('End date must be today or later');return false;}
  if (endDate < startDate){ alert('End date must be after the start date');return false;}
  alert('pass');
  return true;

}
</script>
</div>

[nap0leon]

Daylight savings ought not be a factor in the validation since the values are all calculated client side on the same machine.

[007Julien]

In Europa, on October 28, 2012, if you add 86400000 millisecond (one day) to the date (at 00:00:00) you are always on October 28 !
But, there is not the case if you use myDate.setDate(myDate.getDate()+1).

var myDate=new Date("October 28, 2012");
document.write(myDate+"<br>"); 		// Sun Oct 28 2012 00:00:00 GMT+0200

myNewDate=new Date(myDate.getTime()+86400000);
document.write(myNewDate+"<br>");	// Sun Oct 28 2012 23:00:00 GMT+0100

myDate.setDate(myDate.getDate()+1);
document.write(myDate);			// Mon Oct 29 2012 00:00:00 GMT+0100

To compare today and endDate, the method seems to consist in comparing today and endDate at the same time...

  var today = new Date();
  var endDate = new Date(document.getElementById("endDate").value);
  endDate.setHours(today.getHours(),today.getMinutes,today.getSeconds());
  if (endDate.getTime() < today.getTime()){ alert('End date must be today or later');return false;}

[nap0leon]

Curious why yours switched from GMT+2 to GMT+1 after the first cycle.

On my machine, they all show up as GMT-4

Sun Oct 28 2012 00:00:00 GMT-0400 (Eastern Daylight Time)
Mon Oct 29 2012 00:00:00 GMT-0400 (Eastern Daylight Time)
Mon Oct 29 2012 00:00:00 GMT-0400 (Eastern Daylight Time)

[007Julien]

We live not in the same time zones ! In west Europa GMT+1 we adopt the day ligth saving time GMT+2 from last March Sunday to last October Sunday (October 28, for 2012). In North America Eastern Standard Time, DST start on March 11, 2012 and ends on November 4, 2012 (the first November Sunday). Try with this date you will find GMT-0400 and GMT-0500.

See for example this map and use this jsTimeZonedetect javascript.