Hi,
Ia m trying to have a date selector where I pop up a calendar when the user
clicks on an image. I pretty much followed the docs in
https://developer.yahoo.com/yui/calendar/ and things pretty much work properly
except for catching the 'click' event. I basically launch and render the
calendar then I hide it immediately. Then I add a listener for 'click' event on
an image with a unique id of 'startCalImage' like this:
YAHOO.util.Event.addListener("startCalImage", 'click',
showCal(YAHOO.com.lm.date.range.startCal));

I was hoping to see it rendered when I click on the image. But what happens is
only one event is triggered when first the image is rendered at page load in
essence rendering the calendar once. when I choose a date, the right fields are
populated properly and the calendar is hidden by my select handler by issuing
cal.hide();

My problem is when I click on the image, I don't get the event and the calendar
never shows.

Thanks for your help in advance.

I included all my code below for details. Pardon the lengthy message.


<div id="startCalDiv" style="float: left; padding-left: 5px;">
<img id="startCalImage" src="images/bb.gif" style="width: 32px; height: 32px;"/>
</div>

</div>

<script type="text/javascript">
YAHOO.namespace("com.lm.date.range");

YAHOO.com.lm.date.range.init = function() {

var yue = YAHOO.util.Event;
var yud = YAHOO.util.Dom;

function handleSelect(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0];
var month = date[1];
var day = date[2];


var selMonth = document.getElementById("selMonth");
var selDay = document.getElementById("selDay");
var selYear = document.getElementById("selYear");

selMonth.selectedIndex = month;
selDay.selectedIndex = day;
for (var y=0;y<selYear.options.length;y++) {
if (selYear.options[y].text == year) {
selYear.selectedIndex = y;
break;
}
}

hideCal(YAHOO.com.lm.date.range.startCal);
}

function hideCal(cal) {
cal.hide();
}

function showCal(cal) {
YAHOO.util.Event.preventDefault(cal);
cal.show();
}

function launchCal() {
YAHOO.com.lm.date.range.startCal = new
YAHOO.widget.Calendar("startCal","startCalContainer",
{
mindate:"1/1/2000",

maxdate:"12/31/2500",

navigator:true,

title:"Start Date",
close:true
});

YAHOO.com.lm.date.range.startCal.selectEvent.subscribe(handleSelect,
YAHOO.com.lm.date.range.startCal, true);

YAHOO.com.lm.date.range.startCal.render();
hideCal(YAHOO.com.lm.date.range.startCal);

YAHOO.util.Event.addListener("startCalImage", 'click',
showCal(YAHOO.com.lm.date.range.startCal));
YAHOO.util.Event.addListener("startCalDiv", 'mouseover',
showCal(YAHOO.com.lm.date.range.startCal));
}

launchCal();

}

YAHOO.util.Event.onDOMReady(YAHOO.com.lm.date.range.init);
</script>