Validate dates partially not working

Hi,

I have created a php page where the user selects a pick up date and drop off date from a pop up calendar
and submit the dates by clicking on the submit button. I have write a javascript function which checks
if the drop off date is after the pick up date.If it is not then an alert apperas informing the user for the error.

The code for the function:

<script type="text/javascript">
function check()
{
            var dt1 = Date.parse(document.form1.pickupdate.value+" "+document.form1.pickuphours.value+":00");
           var dt2 = Date.parse(document.form1.dropoffdate.value+" "+document.form1.dropoffhours.value+":00");
     if(dt1>dt2)
     {
          alert("Please select a pick up date that is before the drop off date!");
     return false;
       }
}
</script>

The code of the form:

<form action=".php" method="post" name="form1" id="form1" onsubmit="check(this);">
<input name="pickupdate" type="text" size="18" id ="pickupdate" value="pick up date" class="body"/>
<a href="javascript:showCal('Calendar3')"><img src="datebutton.jpg" alt="dates" border="0" /></a>
                   
                              <select name="pickuphours" class="body">
                              <option selected value="pickuphour"> Pick up hour</option>
                              <option value="08:00">08:00</option>
                              <option value="09:00">09:00</option>
                              <option value="10:00">10:00</option>
                              <option value="11:00">11:00</option>
                              <option value="12:00">12:00</option>
                              <option value="13:00">13:00</option>
                              <option value="14:00">14:00</option>
                              <option value="15:00">15:00</option>
                              <option value="16:00">16:00</option>
                              <option value="17:00">17:00</option>
                              <option value="18:00">18:00</option>
                              <option value="19:00">19:00</option>
                              <option value="20:00">20:00</option>
                    </select>
                              
<input name="dropoffdate" type="text" size="18" value="drop off date" class="body" id="dropoffdate" />
<input name="date" type="text" size="4" value="days" class="body" id="date" style="position:absolute; left: 28px; top: 355px;"/>
<a href="javascript:showCal('Calendar4')"><img src="datebutton.jpg" alt="dates" border="0" /></a>

                      <select name="dropoffhours" class="body" onfocus="calcDays()">
                                <option selected value="dropoffhour"> Drop off hour</option>
                                <option value="08:00">08:00</option>
                                <option value="09:00">09:00</option>
                                <option value="10:00">10:00</option>
                                <option value="11:00">11:00</option>
                                <option value="12:00">12:00</option>
                                <option value="13:00">13:00</option>
                                <option value="14:00">14:00</option>
                                <option value="15:00">15:00</option>
                                <option value="16:00">16:00</option>
                                <option value="17:00">17:00</option>
                                <option value="18:00">18:00</option>
                                <option value="19:00">19:00</option>
                                <option value="20:00">20:00</option>
                      </select>
                      <input name="submit"  type="image" id="button" />
</form>

The function I have written is partially working and I will explain what the two problems are.
The first probllem is  when the user select different month.
 When the user select pick up date:10/05/2006 and drop off: 04/06/2006
an alert displays informing that the drop off date in not after the pick up date which noramlly should not have appeared.
Thus it is comparing the days(10>04) instead the whole date.  

The second problem is that even the alert message appears teh form is been submited.

I would really appreciate your help.

Thank you,
Xenia

xenoulaAsked:
Who is Participating?
 
Richard QuadlingSenior Software DeveloperCommented:
Before you go any further, take a look at http://www.mattkruse.com/javascript/date/source.html

Lots of functions here which you could use.

Especially the comparedates function.
0
 
Richard QuadlingSenior Software DeveloperCommented:
Hi xenoula,


I would get the format for the dates into YYYY-MM-DD and then you can use normal string comparison.

Regards,

Richard Quadling.
0
 
Richard QuadlingSenior Software DeveloperCommented:
xenoula,

In JavaScript that is.

Regards,

Richard.
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
xenoulaAuthor Commented:
Actually I have to use the DD-MM-YYYY format because the whole algorithm I have created is based on the DD-MM-YYYY.
As it is the code I cannot make any changes that will amke it work?

"In JavaScript that is"- > what do you mean?

Thanks,
Xenia.

 
0
 
Richard QuadlingSenior Software DeveloperCommented:
In JS, convert the date from DD-MM-YYYY to YYYY-MM-DD and then use simple string comparison.

0
 
xenoulaAuthor Commented:
Could you please provide an example of code?

Thanks,
Xenia
0
 
xenoulaAuthor Commented:
I tryied this code but it has error.

<script type="text/javascript">
function check()
{
           // var dt1 = Date.parse(document.form1.pickupdate.value+" "+document.form1.pickuphours.value+":00");
      var dtl= dateFormat.parse(document.form1.pickupdate.value+" "+document.form1.pickuphours.value+":00" , '!yyyy-!mm-!dd');
       //var dt2 = Date.parse(document.form1.dropoffdate.value+" "+document.form1.dropoffhours.value+":00");
     var dt2 = dateFormat.parse(document.form1.dropoffdate.value+" "+document.form1.dropoffhours.value+":00" , '!yyyy-!mm-!dd');
       if(dt1>dt2)
     {
          alert("Please select a pick up date that is before the drop off date!");
     return false;
       }
}
</script>

Can you help me please?

Thanks
0
 
Richard QuadlingSenior Software DeveloperCommented:
Assuming your dates are output with leading zeros for the day and the month and the year to 4 digits.

Then something like ...

function check()
{
var s_dt1 = document.form1.pickupdate.value.subString(7,4) + ' ' + document.form1.pickupdate.value.subString(4,2) + ' ' + document.form1.pickupdate.value.subString(1,2) + ' ' + document.form1.pickuphours.value + ':00';
var s_dt2 = document.form1.dropoffdate.value.subString(7,4) + ' ' + document.form1.dropoffdate.value.subString(4,2) + ' ' + document.form1.dropoffdate.value.subString(1,2) + ' ' + document.form1.dropoffhours.value + ':00';
if (s_dt1 > s_dt2)
      {
      alert('Please select a pick up date that is before the drop off date!');
      return false;
      }
else
      {
      return true;
      }
}

Oh.

Just noticed, you are not returning true if the test is OK. Try that first.
0
 
Richard QuadlingSenior Software DeveloperCommented:
The subString() may be subStr(). I hardly use JS as you always have to do the work on the server anyway.
0
 
xenoulaAuthor Commented:
Actually i used substr and it is working fine.
The only problem now is that when the user puts wrong details displays the alert but let the user submit the form.

How we can short it out this please?

Thanks
0
 
xenoulaAuthor Commented:
<form action="est.php" method="post" name="form1" id="form1" onsubmit="check(this);">
This is the event I have put in the form
0
 
Richard QuadlingSenior Software DeveloperCommented:
No need to supply "this" in check() as check() looks directly at the form.

Just to test them...

Before the if in check(), can you add ...

alert('About to compare ' + s_dt1 + ' against ' + s_dt2);

and make sure that the values you are seeing are appropriate.

I MAY have the offsets 1 greater than they should be.

e.g.
document.form1.pickupdate.value.subString(7,4)

may need to be

document.form1.pickupdate.value.subString(6,4)


0
 
xenoulaAuthor Commented:
When I select the 10th day it displays

2006 0/0 0/ 09:00:00

0
 
Richard QuadlingSenior Software DeveloperCommented:
31-12-2005
123456789

DD = (1,2)
MM = (4,2)
YYYY = (7,4)

OR

DD = (0,2)
MM = (3,2)
YYYY = (6,4)


Judging by the response you are getting I think you need to change the substring params to the second set.

Can you also add ...

alert('About to compare ' + document.form1.pickupdate.value + ' against ' + document.form1.dropoffdate.value);

0
 
xenoulaAuthor Commented:
When I used this alert:
alert('About to compare ' + document.form1.pickupdate.value + ' against ' + document.form1.dropoffdate.value);

gave me correct date
0
 
xenoulaAuthor Commented:
I used the
DD = (0,2)
MM = (3,2)
YYYY = (6,4)

is working but again does not stop submiting the form if there is error
0
 
Richard QuadlingSenior Software DeveloperCommented:
What about changing the offsets then?
0
 
xenoulaAuthor Commented:
if I change again the offsets will not take the correct format
0
 
xenoulaAuthor Commented:
What else you think?
0
 
xenoulaAuthor Commented:
Do you think that the errror might be in the event of the form?

<form action="est.php" method="post" name="form1" id="form1" onsubmit="check();">
0
 
xenoulaAuthor Commented:
Ok I find this part I put onsubmit="return check();"
0
 
Richard QuadlingSenior Software DeveloperCommented:
Back again. Are you saying you got this working?
0
 
xenoulaAuthor Commented:
Hi, I manage to find it.However,I would like to ask you a last question.How I can also check that the user does not put
a pick up date earlier than the current date?

Thanks,
Xenia
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.