How do I get the Departure Date in the calendar to work similar to Arrival Date?

**andlin** · Aug 20, 2012 01:41

Hello,

I downloaded the code from this page (http://www.javascriptkit.com/script/...ateform2.shtml) to use for a calendar on a booking form. The calendar should enable the user to select "Arrival Date" and "Departure Date". But when I placed the code in the Dreamweaver document, only the Arrival Date appears correctly, while the Departure Date is blank (I did a copy-paste in Design Mode from "Arrival Date" to "Departure Date").

I know this is due to my lack of knowledge of Javascript, and I imagine there is a quick fix. Would be much grateful if someone could kindly help me out.

I have attached a browser screen shot (Firefox).

Below is the code from my page:

From

Code:

 <head>:

.bookingform {
	width: 700px;
	margin-left: 20px;
}
-->
</style>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17804371-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<script type="text/javascript">

/***********************************************
* Drop Down Date select script- by JavaScriptKit.com
* This notice MUST stay intact for use
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
***********************************************/

var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];

function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}

</script>

</head>

From

Code:

<body>:

            <td>Arrival date</td>
            <td><form action="" name="someform">
<select id="daydropdown">
</select> 
<select id="monthdropdown">
</select> 
<select id="yeardropdown">
</select>
            </form>

<script type="text/javascript">

//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select); 
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>
            </td>
          </tr>
          <td>Departure date</td>
            <td><form action="" name="someform">
<select id="daydropdown">
</select> 
<select id="monthdropdown">
</select> 
<select id="yeardropdown">
</select>
            </form>

<script type="text/javascript">

(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>
            </td>
          <tr>
            <td>Message</td>
            <td><form id="form3" name="form3" method="post" action="">
              <label>
                <textarea name="message" id="message" cols="45"></textarea>
                </label>
            </form>            </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><form id="form4" name="form4" method="post" action="">
                <label>
                <input type="submit" name="submit" id="submit" value="Submit" />
                </label>
                <label>
                <input type="submit" name="reset" id="reset" value="Reset" />
                </label>
            </form></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
      </div>

**Paul O'B** · Aug 20, 2012 02:11

Hi,

Javascript isn't my forte but I'll take a stab at this

You've used the same id for both routines so the second one will never get actioned. IDs are unique and must refer to only one element. You would need something like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">

/***********************************************
* Drop Down Date select script- by JavaScriptKit.com
* This notice MUST stay intact for use
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
***********************************************/

var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];

function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}

</script>
</head>

<body>
<form action="" name="someform">
		<fieldset>
				<legend>Arrival Date</legend>
				<select id="daydropdown">
				</select>
				<select id="monthdropdown">
				</select>
				<select id="yeardropdown">
				</select>
		</fieldset>
</form>
<form action="" name="someform2">
		<fieldset>
				<legend>Departure Date</legend>
				<select id="daydropdown2">
				</select>
				<select id="monthdropdown2">
				</select>
				<select id="yeardropdown2">
				</select>
		</fieldset>
</form>
<!-- scripts like this go at before body closing tag and after all other html so onload isn't needed -->
<script type="text/javascript">
	populatedropdown("daydropdown", "monthdropdown", "yeardropdown");
	populatedropdown("daydropdown2", "monthdropdown2", "yeardropdown2");
</script>
</body>
</html>

However, that code script seems incomplete as all days go to 30 only so you can't choose 31st August but you can choose 30th February which doesn't exist. If you don't mind jquery you can use their datepicker for a neater experience.

In your example the selects are useless if JS is disabled and dates cant be selected.

**andlin** · Aug 21, 2012 00:00

Many thanks Paul,

I've had a look at JQuery's date picker, but it seems too technically challenging for me. I think I will look for a simpler solution, or just create plain drop-down menus in Dreamweaver (although they would allow the user to use past dates and things like 31 February).

**Paul O'B** · Aug 21, 2012 04:52

Originally Posted by andlin

Many thanks Paul,

I've had a look at JQuery's date picker, but it seems too technically challenging for me. I think I will look for a simpler solution, or just create plain drop-down menus in Dreamweaver (although they would allow the user to use past dates and things like 31 February).

The jquery datepicker has all those options built in and isn't that hard to implement if its for a single control. You can just copy and paste the code from the view source link on this page.

User Tag List

Thread: How do I get the Departure Date in the calendar to work similar to Arrival Date?

Thread Tools

Display

How do I get the Departure Date in the calendar to work similar to Arrival Date?

Bookmarks

Bookmarks

Posting Permissions