SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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>
    Attached Images Attached Images
    Last edited by Paul O'B; Aug 20, 2012 at 01:51. Reason: code tags added

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by andlin View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •