Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted on Mar 10, 2009 15:33
open dhtmlx forum
Problems with calendar attached to a text input

I have a calendar which attached to a text input. I want to keep text input editable and want to popup calendar when a button/icon is clicked and then set the date in text input. I got the following code but, when I click on calendar image, I get javascript error:
this.parent is null
onMonthSelect()()dhtmlxcalendar.js (line 84)
(?)()()edit (line 1176)
[Break on this error] this.onLanguageLoaded(status)};function...ct = function(value) {if (!isNaN(value))

My code:
<div>
<span>
<input id="question_16" type="text" name="web_form[question_16]" value=""/>
<img onclick="openCalendar_16();" src="/images/calendar.gif"/>
<span id="cal_container_16" style="float: left;"/>
<label for="question_16">MM/DD/YYYY</label>
</span>
</div>
<script>
1
2 var cal_16;
3 add_calendar_16 = function() {
4 cal_16 = new dhtmlxCalendarObject('cal_container_16',false,{isYearEditable :true,isMonthEditable :true});
5 cal_16.setDateFormat('%m/%d/%Y');
6 cal_16.setSkin('yahoolike');
7 dhtmlxEvent(document.body,"click",function(){ cal_16.hide(); }); //hide calendar onclick
8 //dhtmlxEvent(cal_16.con,"click",function(e){ (e||event).cancelBubble=true; }); //block click events inside calendar object
9 //dhtmlxEvent(cal_16.entObj,"click",function(e){ (e||event).cancelBubble=true; }); //block click events inside calendar object
10 cal_16.attachEvent ("onClick", function(date){
11 document.getElementById ('question_16').value = cal_16.getFormatedDate('%m/%d/%Y',date)
12 });
13 }
14 function openCalendar_16() {
15 alert(cal_16);
16 cal_16.isVisible() ? cal_16.hide() : cal_16.show();
17 }
18 Event.observe(window, 'load', add_calendar_16);
19
</script>
Answer posted by Alex (support) on Mar 11, 2009 03:34

There are some mistakes in your code:

1) method draw() isn't called. This method is necessary:

cal_16.setSkin('yahoolike');

cal_16.draw();

cal_16.hide();

2) <img onclick="openCalendar_16();" src="/images/calendar.gif"/> This code calls body onclick - and calendar closes. 

Answer posted on Mar 11, 2009 04:50
Thanks for the reply!
Making suggested change won't work either.
cal_16.draw();
$('cal_container_10').hide();// hide the container

now in onClick I call
$('cal_container_10').show(); calendar won't show. I also tried calling cal_16.show() but clicking on icon won't show the calendar. I don't get any javascript errors now.

function openCalendar_10() {
 alert(cal_10);
 $('cal_container_10').show();
 //cal_10.isVisible() ? cal_10.hide() : cal_10.show();
 }

Answer posted by Alex (support) on Mar 11, 2009 05:48

In my previous reply I've written about two mistakes in your code. Please, check the 2) once again. 

You don't cancel bubbling in the onclick event handler of the image. That is why the body onclick event handler is called (dhtmlxEvent(document.body,"click",function(){ cal_16.hide(); });) - calendar closes.