Validate Date coming through popup in 2 text fields

@lee_helpFeb 07.2012

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….

to post a comment

JavaScript

7 Comments(s) _↴

@nap0leonFeb 07.2012 — #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.

<i>
 </i>&lt;div&gt;
 Start Date: &lt;input type="text" name="startDate"  id="startDate" size="6"  value="11/30/2011"/&gt;
 &lt;br/&gt;End Date: &lt;input type="text" name="endDate"  id="endDate" size="6"  value="2/15/2012"/&gt;
 &lt;br/&gt;&lt;a href="javascript:void(0);" onclick="javascript:ValidateDate()"&gt;Validate&lt;/a&gt;
 &lt;script&gt;
 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 &lt; today+1){ alert('End date must be today or later');return false;}
 if (endDate &lt; startDate){ alert('End date must be after the start date');return false;}
 alert('pass');
 return true;
 
 }
 &lt;/script&gt;
 &lt;/div&gt;

@007JulienFeb 07.2012 — #I am not sure that the today+1 (Tue Feb 7 15:30:45 UTC+0100 [B]20121[/B] !) 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...

@nap0leonFeb 07.2012 — #Hah - good catch... I didn't test it thoroughly.

Try this one:

<i>
 </i>&lt;div&gt;
 Start Date: &lt;input type="text" name="startDate"  id="startDate" size="6"  value="11/30/2011"/&gt;
 &lt;br/&gt;End Date: &lt;input type="text" name="endDate"  id="endDate" size="6"  value="2/15/2012"/&gt;
 &lt;br/&gt;&lt;a href="javascript:void(0);" onclick="javascript:ValidateDate()"&gt;Validate&lt;/a&gt;
 &lt;script&gt;
 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 &gt; today){ alert('End date must be today or later');return false;}
 if (endDate &lt; startDate){ alert('End date must be after the start date');return false;}
 alert('pass');
 return true;
 
 }
 &lt;/script&gt;
 &lt;/div&gt;

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

@007JulienFeb 07.2012 — #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).

[CODE]var myDate=new Date("October 28, 2012");
 document.write(myDate+"<br>"); 		[COLOR="Blue"]// Sun Oct 28 2012 00:00:00 GMT+0200[/COLOR]
 
 myNewDate=new Date(myDate.getTime()+86400000);
 document.write(myNewDate+"<br>");	[COLOR="Blue"]// Sun Oct 28 2012 23:00:00 GMT+0100[/COLOR]
 
 myDate.setDate(myDate.getDate()+1);
 document.write(myDate);[COLOR="Blue"]			// Mon Oct 29 2012 00:00:00 GMT+0100[/COLOR]
 [/CODE]

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

[CODE]
  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;}
 [/CODE]

@nap0leonFeb 07.2012 — #Curious why yours switched from GMT+2 to GMT+1 after the first cycle.

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

<i>
 </i>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)

@007JulienFeb 08.2012 — #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.

Also in #JavaScript _↴

Help with showDialogWindow (there is an extra pop-up window)Help me tweak Softscroll.js [RESOLVED] I'm feeling really stupid

Success!

Help @lee_help spread the word by sharing this article on Twitter...

Tweet This

Validate Date coming through popup in 2 text fields

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Validate Date coming through popup in 2 text fields

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴