Board Logo

Pop up calendar on input text field and not calendar icon
jwatts - 7/22/2010 at 02:45 PM

I wanted to make the calendar pop up when someone clicked in the input field (like an onfocus) instead of them having to click the calendar icon. This solution isn't brilliant, but it works for me. The only thing is, it involves having 2 input fields that will have the same value (the date selected), so you may need to add some code to whatever form handler you're using to prevent both of them from submitting.

First, for your HTML form, instead of setting up a text input to hold the date, set up a hidden field instead. For example:

<input name="thedate" id="thedate" type="hidden" />
<script language="JavaScript">
new tcal ({
// input name
'controlname': 'thedate'

Then for the JS, open your calendar_xx.js file (I use calendar_us.js) and find the following line in the tcal function (around line 73):
document.write('<img src="' + a_tpl.imgpath + 'cal.gif" id="' + this.s_iconId + '" onclick="A_TCALS['' +this.s_id + ''].f_toggle()" class="tcalIcon" alt="Open Calendar" />');

Replace that line of code with this:
document.write('<input type="text" id="' + this.s_iconId + '" onfocus="A_TCALS['' + this.s_id + ''].f_toggle()" class="tcalIcon" alt="Open Calendar" />');

Scroll down to find the following line in the f_tcalHide function (around line 158):
this.e_icon.src = this.a_tpl.imgpath + 'cal.gif';

Replace that line of code with this:
this.e_icon.value = this.e_input.value;

That line of code is the one that will put the selected date in your generated input field so your users will see it. Otherwise, it will merely put the selected date in your hidden field and the text field will remain blank.

I hope that helps someone!

Back to forum: