using popup calendar to compare two dates picked from the popup calendar

[kwstephenchan]

Hi Everyone,

 

I got an ajax code bit (using AJax) for a popup calendar to be used in my website.  There is a start date and an end date.

 

Both dates are selected from this popup calendar, as such, I cannot use onfocus, onblur, onchange and so on as the field

was not input by user.  The date is picked and placed into these two fields.

 

But I want to compare the two dates so that the end date is not supposed to be earlier than the start date.

 

Anyone got any idea how the comparison can be accomplished.

 

Thanks!

 

[Ken2k7]

Without showing us any code, I don't know how much help we can be. What format is the date in?

[kwstephenchan]

<tr valign="baseline">

      <td width="200" height="20" align="right" class="lbtxt">Estimated Start : </td>

      <td height="20" class="intxt">

          <input name="m_eststart" type="date" id="m_eststart" class="datechooser dc-dateformat='Y-m-d' dc-iconlink='images/datechooser.png'" size="10">

                          <font color="#5da845"> </font><br>

  </tr>

<tr valign="baseline">

                        <td width="200" height="20" align="right" class="lbtxt">Estimated End : </td>

                        <td height="20" class="intxt">

                          <input name="m_estend" type="date" id="m_estend" class="datechooser dc-dateformat='Y-m-d' dc-iconlink='images/datechooser.png'"  size="10">

                          <font color="#5da845"> </font><br>

  </tr>

 

 

datechooser is an Ajax function that I got from www.yellow.us.  After I have picked a date, the selected date will be placed with

the date format specified.  But I cannot compare these two dates, so if user picks an end date which is earlier than start date, I can only check after the form is submitted. I thus need to refresh the screen and defeating the purpose of Ajax.

 

Thanks.

[Ken2k7]

// assuming the format is Y-m-d
function date_compare (date1, date2) {
date1 = date1.split("-");
date2 = date2.split("-");
var y1 = parseInt(date1[0]), y2 = parseInt(date2[0]);
var m1 = parseInt(date1[1]), m2 = parseInt(date2[1]);
var d1 = parseInt(date1[2]), d2 = parseInt(date2[2]);
if (y1 > y2) return 1;
if (y1 < y2) return -1;
if (m1 > m2) return 1;
if (m1 < m2) return -1;
if (d1 > d2) return 1;
if (d1 < d2) return -1;
return 0;
}

 

Given 2 dates in format Y-m-d, it returns a negative number if date1 is before date2, a positive number if date1 is after date2, and it returns 0 if date1 is equal to date2.

[kwstephenchan]

Thanks.

 

However, what I want to achieve is that as soon as the user has selected an end date, the comparison will take place but I do not know where I can insert such comparison. I tried on focus, on blur, on change and so on but the trigger of these event will require user to actually input something or to set the cursor to the field even though a date has been selected. What I want is to tell the user a wrong date has been selected if the end date is earlier than the start date.

 

Thanks!

[haku]

I am assuming that when a user clicks on a date, a function is executed that puts that date into a textfield or something, right? What you want to do is as the end of that function, do a check to see if the other date area has been filled in. If it has, then compare them, if not, then do nothing. If the comparison results in a failure (the second date in fact isn't after the first one), then do...whatever it is you want - pop up a window or highlight the area in red or whatnot.

 

If you do this with both date-inserting functions, it won't matter which date was selected first, as both of them will check the other date at the end of the function. In this way you don't need it to be tied to a new event.