Start Building Professional
Web Apps Today

dhtmlxCalendar + multiple input box show hide

I am using dhtmlxCalendar with the multiple input text in the same page. but whenever click the clicking on any such input text , its not closing its previous input calendars. below is the code sample have a look @ it.

var cal1,
cal2,
mCal,
mDCal,
newStyleSheet;
var dateFrom = null;
var dateTo = null;
window.onload = function() {
cal1 = new dhtmlxCalendarObject('sDate');
cal1.setDateFormat("%m/%d/%Y");
cal1.draw();
cal1.hide();

cal2 = new dhtmlxCalendarObject('eDate');
cal2.setDateFormat("%m/%d/%Y");
cal2.draw();
cal2.hide();

}



<div id="start-date" class="rowContainer" >
<li>
<label for="sDate" class="rowLabel" style="display:block; float:left; ">Start date</label>
<input id="sDate" name="sDate" class="required" type="text" autocomplete="off" style="display:block; float:left; width:250px;" readonly="true" >
<label for="sDate" class="tooltipContainer info">Please enter a date</label>
<label for="sDate" class="tooltipContainer invalid">REQUIRED</label>
</li><span class="clear" />

</div>

<div id="end-date" class="rowContainer">
<li>
<label for="eDate" class="rowLabel" style="display:block; float:left; ">End date</label>
<input id="eDate" name="eDate" class="required" type="text" autocomplete="off" style="display:block; float:left; width:250px;" readonly="true" >
<label for="eDate" class="tooltipContainer info">Please enter a date</label>
<label for="eDate" class="tooltipContainer invalid">REQUIRED</label>
</li><span class="clear" />

</div>