JavaScript + dates

I have two text boxes as part of a web page - a start date and a finish date. I would like to validate the dates and check to see if the start date is before the finish or not.TIA
j_machaleAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mayhewCommented:
This is pretty basic, but I would probably do something like this.


<form name="myform" action="http://www.microsoft.com">
  <input type="textbox" name="date1">
  <input type="textbox" name="date2"><br>
 
  <input type="button" name="go" value="Go" onclick="CheckDates();">
</form>


<script language=javascript>
function CheckDates(){
  var date1
  var date2

  date1 = eval("new Date('"+document.forms[0].date1.value+"')");
  date2 = eval("new Date('"+document.forms[0].date2.value+"')");

  if (isNaN(date1)){
    alert ('Date1 is invalid.');
  }
  else if (isNaN(date2)){
    alert ('Date2 is invalid.');
  }
  else if (date1>date2){
    alert ('Date1 is after Date2');
  }
  else{
    myform.submit();
  }
}
</script>



Let me know how this works for you.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
j_machaleAuthor Commented:
Thanks mayhew. Is there a coressponding funtion to isNaN() for time ?
0
mayhewCommented:
Hi j_machale,

I'm glad that worked for you.


I don't understand your follow-up, though.

There isn't really a time object.  Times are stored with the date in a date object.

Can you describe what it is you're trying to do?
0
Exploring SharePoint 2016

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

j_machaleAuthor Commented:
Sorry, I think I misunderstood what the NaN()does(Started writing JS today!). I wanted to see if one time came after another time as my page now has start date & time and finish date & time. I want to keep the error message separate for the date/time fields. This is my attempt at the code for it.

function CheckTimes(){

  time1 = new String("1/1/99 ");
  time2 = new String("1/1/99 ");

  time1 = time1.concat(new String (d1.value));
  time2 = time2.concat(new String (d2.value));
 
  date1 = eval("new Date(time1)");
  date2 = eval("new Date(time2)");
 
  if (isNaN(date1)){
    alert ('Time1 is invalid.');
  }
  else if (isNaN(date2)){
    alert ('Time2 is invalid.');
  }
  else if (date1>date2){
    alert ('Time1 is after Time2');
  }
  else{
     alert ('Working OK');
  }
}

Is there a better way ?. Thanks,j.
0
mayhewCommented:
Are your times in their own text boxes?  (i.e. separate from the date boxes)


Are d1 and d2 your time text boxes?



If that's the case, I don't understand why you would want to check for the times separately.

10 PM on the 1st is earlier than 5 PM on the 5th.  Isn't that what you want to test for?

Can you give me a better idea what you're trying to do?
0
j_machaleAuthor Commented:
Yes I should probably put them together but I was setting the focus back to the text box where the err occured. I just want to make it as UF as possible. On the page there are now four TB's called D1,D2,T1,T2. D1,T1 is the start date & time for the meeting and D2,T2 is the end date & time for the meeting. Any suggestion on how to do this neatly would be greatly appricated. My sincere thanks,j.
0
mayhewCommented:
Sure, I can help you with the code.

No problem.  :)


The question I still have, though, is if you really want to verfity if time1 is later than time2.

I think that you basically need to test for five things (if you have four different text boxes).

1) Date1 is valid.
2) Date2 is valid.
3) Time1 is valid.
4) Time2 is valid.
5) Date1+Time1 < Date2+Time2


Does this sound right?  Or am I missing something?

Let me know and I'll work up a sample.  

I think you're already pretty close.
0
j_machaleAuthor Commented:
Yes that is the idea
0
mayhewCommented:
Again, this is very basic.  But this will get you started.

A couple of notes.  This doesn't test for the times being empty (I didn't know if you would want that).  You can put an if in to check if your textboxes are empty when you're assigning values to variables.

Also, once you get values into the date objects, you can then do all of the javascript date and time functions to get parts of the date/time.

For example, you can look at the month, day, hour, or whatever of a date object and decide if you like it or not.

A decent reference is at
http://developer.netscape.com/docs/manuals/communicator/jsref/contents.htm


Also, I didn't really need the eval's in the first code segment that I gave you.  I wasn't sure and so I threw them in.  But you don't really need them in this case.

Let me know if you have questions with any of this.

Your own code was *very* close.  Pretty good for a new js programmer.  ;)


<form name="myform" action="http://www.whatever.com">
  Date1 <input type="textbox" name="date1"><br>
  Time1 <input type="textbox" name="time1"><br><br><br>

  Date2 <input type="textbox" name="date2"><br>
  Time2 <input type="textbox" name="time2"><br><br>
 
  <input type="button" name="go" value="Go" onclick="CheckDates();">
</form>


<script language=javascript>
function CheckDates(){
  var date1
  var date2

  var time1
  var time2

  var datetime1
  var datetime2

  date1 = new Date(document.forms[0].date1.value);
  date2 = new Date(document.forms[0].date2.value);

  time1 = new Date("1/1/89 "+document.forms[0].time1.value);
  time2 = new Date("1/1/89 "+document.forms[0].time2.value);

  datetime1 = new Date(document.forms[0].date1.value +" "+ document.forms[0].time1.value);
  datetime2 = new Date(document.forms[0].date2.value +" "+ document.forms[0].time2.value);


  if (isNaN(date1)){
    alert ('Date1 is invalid.');
  }
  else if (isNaN(date2)){
    alert ('Date2 is invalid.');
  }
  else if (isNaN(time1)){
    alert ('Time1 is invalid.');
  }
  else if (isNaN(time2)){
    alert ('Time2 is invalid.');
  }
  else if (datetime1>datetime2){
    alert ('Date1 is after Date2');
  }
  else{
    document.write(date1+"|"+date2+"<br>");
    document.write(time1+"|"+time2+"<br>");
    document.write(datetime1+"|"+datetime2+"<br>");
    //myform.submit();
  }
}

</script>
0
j_machaleAuthor Commented:
Thanks for the help but I may have to try another approcah. This will let the user put in a date like 123/12/99 and more importantly thinks that 1/1/00 is earlier than 1/1/99. Is there any way to parse a string in JS ? Will send more points if necessary. j.
0
mayhewCommented:
Yes, you can parse through the parts of a javascript date object.

That's what I was trying to say in my last post.

If you go to the link I mentioned and scroll down to Date (about one third of the way down) there is a link to the date object and its methods and properties.

Here is the direct link to the date methods.

http://developer.netscape.com/docs/manuals/communicator/jsref/core3.htm#1012948


There you will see methods like MyDate.getHours and things like that.

You can get and set each of the different parts of your date object by using those methods.

For example, you could getDay and check that the value is between 1 and 31.  If not, set it to 1 (for example) or trigger an error.

You can go through and write code to check each part of the date and write very specific error handling that way.

Let me know if that's what you're looking for.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.