www.webdeveloper.com
Results 1 to 8 of 8

Thread: Validate Date coming through popup in 2 text fields

  1. #1
    Join Date
    Jan 2012
    Posts
    7

    Validate Date coming through popup in 2 text fields

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

  2. #2
    Join Date
    Nov 2007
    Posts
    409
    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.
    Code:
    <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>

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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...

  4. #4
    Join Date
    Nov 2007
    Posts
    409
    Hah - good catch... I didn't test it thoroughly.

    Try this one:
    Code:
    <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>

  5. #5
    Join Date
    Nov 2007
    Posts
    409
    Daylight savings ought not be a factor in the validation since the values are all calculated client side on the same machine.

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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>"); 		// 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...
    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;}
    Last edited by 007Julien; 02-07-2012 at 02:13 PM.

  7. #7
    Join Date
    Nov 2007
    Posts
    409
    Curious why yours switched from GMT+2 to GMT+1 after the first cycle.

    On my machine, they all show up as GMT-4
    Code:
    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)

  8. #8
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles