Reputation: 885
I am trying to trigger a calendar popup on an image with JavaScript, but for some reason, it isn't working correctly. Any advice?
Here is my code:
<input size="12" id="f_date1" class="fields"/> <a href="#" class="f_btn1" title="Select your date and time."><img src="Icons/calendar.png" alt="Calendar" width="16" height="16" border="0" /></a></td>
<script type="text/javascript">//<![CDATA[
Calendar.setup({
inputField : "f_date1",
trigger : "f_btn1",
onSelect : function() { this.hide() },
showTime : 12,
dateFormat : "%Y-%m-%d %I:%M %p"
});
//]]></script>
The CSS and the JS are included in the header.
UPDATE
I did that with
<script type="text/javascript">//<![CDATA[
Calendar.setup({
inputField : "f_date10",
trigger : "f_btn10",
onSelect : function() { this.hide() },
showTime : 12,
dateFormat : "%Y-%m-%d %I:%M %p"
});
Calendar.setup({
inputField : "f_date11",
trigger : "f_btn11",
onSelect : function() { this.hide() },
showTime : 12,
dateFormat : "%Y-%m-%d %I:%M %p"
});
Calendar.setup({
inputField : "f_date12",
trigger : "f_btn12",
onSelect : function() { this.hide() },
showTime : 12,
dateFormat : "%Y-%m-%d %I:%M %p"
});
Calendar.setup({
inputField : "f_date13",
trigger : "f_btn13",
onSelect : function() { this.hide() },
showTime : 12,
dateFormat : "%Y-%m-%d %I:%M %p"
});
Calendar.setup({
inputField : "f_date14",
trigger : "f_btn14",
onSelect : function() { this.hide() },
showTime : 12,
dateFormat : "%Y-%m-%d %I:%M %p"
});
<script>
but no dice. It still refuses to fire even with the CSS and JS added...
Upvotes: 0
Views: 4604
Reputation: 10148
I guess this is jsCalendar plugin.
Your trigger: "f_btn1" should be an id attribute, not class in the anchor HTML tag.
Like this:
<a href="#" id="f_btn1" title="Select your date and time.">
Instead of this:
<a href="#" class="f_btn1" title="Select your date and time.">
Also, you don't need to wrap img within anchor tag. In the calendar documentation you read about "trigger" parameter:
trigger — an ID of a <button> element (in fact any element type) that should trigger the popup calendar (the calendar hooks on the “onclick” event).
Upvotes: 1