How use calendar with a dynamic generated textbox

JavaScript
1

Hi Peers,
i am creating dynamic textboxes where the user has to choose a date.
I have my calendar.js file that i usually call to popup a calendar when using static textboxes…my question is how can use it with dynamic textboxes ?

Below is a portion of my code that create my dynamic textbox

thanks

newStartDate = document.createElement( ‘INPUT’ );
newStartDate.setAttribute(‘id’,‘id1’);
newStartDate.setAttribute(‘name’,‘StartDateName’);

2

The answer has to be Yes but the current information given is not enough to tell you how.

Normally the popup calendar would be trigger by some event.

For example shifting focus to the text box or clicking a calendar icon beside the text box.

In the first case, shifting focus, the text box has an event listener for “focus” which causes the pop up the calendar. There is no reason why the dynamically created textbox should not have a similar event listener.

In the second case, icon, when the text box is created the icon must also be created.

3

Hi Phillip,

Thanks for the reply… Here is an example where i am using it on a static ( regular( textbox) and i am aslo using in this example, the calendar img:

static textbox

<cfinput name="PROJECT_LAUNCH_DATE" type="text" size = "10" maxlength="10" style="background-color:##FFFFD4" 
      message="- Launch Date is Required" validate="date" validateat="onsubmit" required="yes"/>
     <script language='javascript'>
					if (!document.layers) {
					document.write("<img src=../media/forms/cal.gif height=16 width=16 onclick='popUpCalendar(this, form1.PROJECT_LAUNCH_DATE, \\"mm/dd/yyyy\\")' alt='click here to choose date'>")
					}
				</script>
      <img src="../media/images/asterix.jpg" />

Dynamic Textbox

newStartDate = document.createElement( 'INPUT' );
newStartDate.setAttribute('id','id1'); 
newStartDate.setAttribute('name','StartDateName');
4

I notice you have <cfinput . Is this just a typo or am I missing something?

I also notice your have the code “(!document.layers)” which just the long gone days of Netscape. It makes me worry about the calendar code you are using.

Essentially the code you presented

<input name="PROJECT_LAUNCH_DATE" type="text" size = "10" maxlength="10" style="background-color:##FFFFD4" 
message="- Launch Date is Required" validate="date" validateat="onsubmit" required="yes"/>
<script language='javascript'>
if (!document.layers) {
document.write("<img src=../media/forms/cal.gif height=16 width=16 onclick='popUpCalendar(this, form1.PROJECT_LAUNCH_DATE, \\"mm/dd/yyyy\\")' alt='click here to choose date'>")
}

This uses javascript to present an image after the input box and assign it a onclick event which calls a function popUpCalendar. This function has two arguments, “this” (the image - presumably for positioning) and the name of the input box to which it relates.

The javascript you are using to create the dynamic input box must mirror this.

Now there are a lot of browser independent considerations here and life would be a lot easier if you used jquery. Have you thought of doing so.

The jquery UI has a very nice datepicker utility.

5

Hi Phillip ,
I used the code below with dymnamic generated textbox name but it does not work.

For the <cfinput …, it is normal as i am using Coldfusiuon which has same tags as html except the cf in the begining …

For your suggestion of using Jquery i do not have any problem to learn about it…is it going to work with dynamic stuff …and can you point me to a simple calendar picker example please ?

thanks a lot

6

I did surmise that it was coldfusion but it is not a piece of software with which I am familiar.

Demo and documentation on the jquery ui datepicker can be found at jQuery UI - Datepicker Demos & Documentation

7

Hi Phillip ,
thanks i got that already and testing… but i can not make working with my code …

8

What problem are you experiencing;

9

Can not find the logic how to link my created textbox with the calendar .
here is my code that genearte the textbox :
i need just that part that calls the calendar (of course i am including the relateds calendar_us.js and css one in the heade)

newStartDate = document.createElement( ‘INPUT’ );
newStartDate.setAttribute(‘id1’,‘id’+ elementid+elementrow);
newStartDate.setAttribute(‘name’,‘StartDateName’+ elementid+elementrow);
newStartDate.size=8;
newStartDate.style.backgroundColor= bgc;

and here is how Jquery iscreating new dynamic element with calendar

<script language=“JavaScript”>
var N_CALNUM = 1;
function f_createContent() {
var e_div = f_getElement(‘container’);
e_div.innerHTML += N_CALNUM
+ ‘. <input type=“text” name="testinput’ + N_CALNUM + ‘" value=“” />’
+ ‘<img title=“Open Calendar” class=“tcalIcon” onclick=“A_TCALS[\‘myCalID’ + N_CALNUM + ‘\’].f_toggle()” id="tcalico_myCalID’ + N_CALNUM + ‘" src=“img/cal.gif”/><br />’;

		new tcal ({
			// form name
			'formname': 'testform',
			// input name
			'controlname': 'testinput' + N_CALNUM,
			// set unique ID to identify the elements
			'id': 'myCalID' + N_CALNUM
		});
		
		N_CALNUM++;
	}
	function f_removeContent() {
		var e_div = f_getElement('container');
		e_div.innerHTML = '';
		window.A_TCALS = null;
		window.A_TCALSIDX = null;
		N_CALNUM = 1;
	}
&lt;/script&gt;

??