Web Analytics Made Easy -
StatCounter Trouble Implementing JavaScript Calendar Widget with createElement - CodingForum

Announcement

Collapse
No announcement yet.

Trouble Implementing JavaScript Calendar Widget with createElement

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Trouble Implementing JavaScript Calendar Widget with createElement

    This is a bit of a weird question but I was hoping somebody out there might have some advice.

    I am building a script that generates my form fields for me, however I have run into a problem. One field type is a a text input for date selection. I have been using the JSCalendar widget from Dynarch to help my users select dates quicker. The calendar actually offers tons of useful features and I recommend it if you don't feel like building your own.

    I am running into a somewhat show-stopping problem. While it is fairly easy to implement the calendar on a standard form:

    Code:
    <input type="text" name="estneeded" id="estneeded" readonly="1" value="<?php echo $edit[EstNeeded]; ?>"/>
    
    <img src="/inc/JSCalendar/img.gif" id="estneeded_button"
        style="cursor: pointer; border: 1px solid red;"
        title="Date selector"
        onmouseover="this.style.background='red';"
        onmouseout="this.style.background=''" />
    		<script type="text/javascript">
    			Calendar.setup({
            		inputField     :    "estneeded",
           			ifFormat       :    "%Y-%m-%d",
            		button         :    "estneeded_button",
            		align          :    "Tl",
            		singleClick    :    false
    	});
    		</script>
    </label>
    It is not so easy to implement the calendar into my JS:

    Code:
    if(inputType=="text - date") 
    { 
    	var para = document.createElement("p"); 
    	var input = document.createElement("input"); 
    		input.setAttribute("id",listId); 
    		input.setAttribute("name",listId);
    	var label = document.createElement("label"); 
    		fieldset.appendChild(para); 
    		para.appendChild(label); 
    			label.appendChild(document.createTextNode(inputLabel)); 
    			label.setAttribute("for",listId); 
    		label.appendChild(input); 
    	var calImg = document.createElement("img"); 
    		calImg.setAttribute("src","/JavaScript/JSCalendar/img.gif"); 
    		calImg.setAttribute("id",listId+"_button"); 
    		calImg.setAttribute("style","cursor: pointer; border: 1px solid red;"); 
    		calImg.setAttribute("title","Date selector"); 
    		calImg.setAttribute("onmouseover","this.style.background='red'");
    		calImg.setAttribute("onmouseout","this.style.background=''");
    		Calendar.setup({	inputField : listId, ifFormat : "%Y-%m-%d", button : listId+"_button", align : "Tl", singleClick : false });
    	para.appendChild(calImg);
    }
    I have included the JSCalendar files in my pages parent file - and the lines of code you are seeing were taken from an included formGen.js file. These lines will successfully put the calendar widget button to the side of my form field where needed but the widget is not activated when you click on the button. I was hoping somebody would have a suggestion.

    Personally I think that the problem arises on the line:
    Code:
    calendar.setup ({ . . .
    But any suggestions would be helpful.

    Thanks
    Last edited by ruggeddesign; Sep 26, 2006, 03:47 PM.

  • #2
    Nevermind - I figured it out.

    The line that needed to be altered was:

    Code:
    para.appendChild(calImg);
    In order for the dynarch JSCalendar to work you have to go like this:

    Code:
    label.appendChild(calImg);
    Normally I would delete my post but I thought this might be useful to somebody else searching the web with a similar problem but maybe not.

    Feel free to delete my posting.

    Comment

    Working...
    X