www.webdeveloper.com
Results 1 to 4 of 4

Thread: Calendar.js not working for two instance

  1. #1
    Join Date
    Jun 2011
    Posts
    6

    Calendar.js not working for two instance

    I have a script like below
    Code:
    <script type="text/javascript">
    
    var monthtext=['January','February','March','April','May','June','July','August','September','October','November','December'];
    
    function populatedropdown(monthfield,dayfield, 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>
    I have placed that in an html like below.
    HTML Code:
    <form action="" name="Resources.php">
    <div id="calendar1">
    			
    				 <select id="monthdropdown1">
    				</select> 
    				<select id="daydropdown1">
    				</select>
    				<select id="yeardropdown1">
    				</select>
    			
    
    			<script type="text/javascript">
    
    //populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
    window.onload=function(){
    populatedropdown("monthdropdown1","daydropdown1", "yeardropdown1")
    }
    </script>
    		</div>	
    	<span>to</span>
    		<div id="calendar2">
    			
    			<select id="monthdropdown2">
    				</select> 
    				<select id="daydropdown2">
    				</select> <select id="yeardropdown2">
    				</select>
    		
    
    			<script type="text/javascript">
    
    //populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
    window.onload=function(){
    populatedropdown("monthdropdown2","daydropdown2",  "yeardropdown2")
    }
    </script>
    		</div>
    		</form>
    Only the second calendar is taking effect. All the dropdowns in calendar1 is empty. Please help me.

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    This onload function would be better !

    HTML Code:
    window.onload=function(){
       populatedropdown("monthdropdown1","daydropdown1","yeardropdown1");
       populatedropdown("monthdropdown2","daydropdown2","yeardropdown2");
    }

  3. #3
    Join Date
    Jun 2011
    Posts
    6
    Thanks.. its working fine.If u dont mind can u plz tell me why the other code was not working.

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    You can attach only one function with this method, the second one overrides the first.

    See, for example this page for a non destructive cross browser method ...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles