Start Building Professional
Web Apps Today

Expanding Forms containing dhtmlxCalendarObject

I'm designing a form that will have a variable number of rows of input fields. My script successfully creates new date-input fields and associated dhtmlxCalendarObject scripts (with incremented ids and variable names), but the calendar does not appear on the cloned rows.

Here's the function that creates a clone when a user clicks the "Add Row" button. The first (static) date field has an id of "DATE01" and an object of "mCal." The next (cloned) date field is id "DATE02" and object "mCal2", etc.

What am I doing wrong? Thanks in advance.

<script type="text/javascript">
var rowCount = 2;
function addRow(){
var rowNodeClone = document.getElementById("row2clone").cloneNode(true);
var tableNode     = document.getElementById("test_table").getElementsByTagName("TBODY").item(0);

var newRowCount = rowCount++;
rowNodeClone.id = "rowNumber" + newRowCount;

//find the Date input field and increment its id
var dateField = rowNodeClone.getElementsByTagName("input").item(0);

if(newRowCount < 10){
dateField.id = "DATE0" + newRowCount;
}
else{
dateField.id = "DATE" + newRowCount;
}

//find the Calendar script and increment its values
var dateScript = rowNodeClone.getElementsByTagName("script").item(0);

if(newRowCount < 10){
dateScript.text = 'mCal' + newRowCount + ' = new dhtmlxCalendarObject("DATE0' + newRowCount + '"); mCal' + newRowCount + '.setSkin("yahoolike"); mCal' + newRowCount + '.setDateFormat("%m/%d/%Y"); mCal' + newRowCount + '.draw();';
}
else{
dateScript.text = 'mCal' + newRowCount + ' = new dhtmlxCalendarObject("DATE' + newRowCount + '"); mCal' + newRowCount + '.setSkin("yahoolike"); mCal' + newRowCount + '.setDateFormat("%m/%d/%Y"); mCal + newRowCount + .draw();';
}

tableNode.appendChild(rowNodeClone);
}
</script>

You can use following code as more easiest way to dynamically creation of the calendars:

var newCalId = 'mCal' + newRowCount;
window [newCalId] = new dhtmlxCalendarObject('DATE0' + newRowCount);
window [newCalId].setSkin("yahoolike");
window [newCalId].setDateFormat("%m/%d/%Y");
window [newCalId].draw();

instead

var dateScript = rowNodeClone.getElementsByTagName("script").item(0);

dateScript.text = 'mCal' + newRowCount + ' = new dhtmlxCalendarObject("DATE0' + newRowCount + '"); mCal' + newRowCount + '.setSkin("yahoolike"); mCal' + newRowCount + '.setDateFormat("%m/%d/%Y"); mCal' + newRowCount + '.draw();';