[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 189
  • Last Modified:

Calendarfunction with two dates. I want the selection of the first date to also set the second date one day later.

I have a page with two dates, an arrival date and a departure date. You can click the calendar-icon next to the datefields to set a date. What I want is to, when you set the arrival date, automatically set the departure date to one day later than the arrival date. However, if the departure date already is greater than arrival date then the departure date should not be changed.

Here is the page: http://www.countrysidehotels.se/calendar.asp
  • 3
1 Solution
add this function to the top:

function populate(aSource){
  var dest = document.forms[0].BookEndDate;
  if (aSource.value=="") return;
  var dtSource = getDateFromFormat(aSource.value,"yyyy-MM-dd");  
  if (dest.value==""){
    dest.value=formatDate(new Date(dtSource+24*60*60*1000),"yyyy-MM-dd");
  } else {  
    var dtDest=getDateFromFormat(dest.value,"yyyy-MM-dd");    
    if (dtDest<dtSource) {
      dest.value=formatDate(new Date(dtSource+24*60*60*1000),"yyyy-MM-dd");

change the onblur function:

name="BookStartDate" maxlength="10" value="2005-04-15" onblur="populate(this,this.form.BookEndDate)"

onkeyup="this.value=this.value.split(' ').join('');" class="FormFieldM" type="text">

I also notice that your form declaration is incorrect in such that you've closed the form at the very start of the page, with all other elements placed outside the form, You should move your </form> tag to the end of your page.
jenmatAuthor Commented:
This sort of works.

The problem is that the onblur function only works when i step from the field BookStartDate to another field and not just by selecting a date in the calendar window.  Is there another way to call the function than onblur?
Not a very clean solution, but you may try this:

add the function:

function checkDates(){


<body onload="checkDates()">

remove the onblur declaration placed previously.
If you want to have a cleaner solution, you would have to modify your DevCalendar.js and change the CalendarPopup_tmpReturnFunction function to call populate before returning.

You may also need to add in a few custom properties to the CalendarPopup object so your tmpReturnFunction would not need to hardcode the parameters to be passed to populate.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now