How to combine date and time

I want to combine date and time in one input text box and whenever onclick event on the “small calendar image”, the calendar pops up and show the date and time corresponding with the input text box.

Currently I only manage to separate 2 input text box representing each date and time respectively.

Here are my codes.

	<script type="text/javascript"> 
     
    var calendar; 
	var tp;
     
    
  
    //initialize the popup calendar 
    function initCalendar(){
		calendar = new dhtmlxCalendarObject("container",false);
		calendar.draw(); 

		calendar.enableTime(true);
		tp = calendar.tp;

        calendar.setPosition(document.getElementById("calendaricon")); 
     
        calendar.hide(); 
     
        calendar.attachEvent("onClick",function(date){ 
        	var input = document.getElementById("input"); 
            input.value = calendar.getFormatedDate("%d.%m.%Y", date);  

			var input2 = document.getElementById("input2"); 
			input2.value = tp.getFormatedTime("%H:%i:%s");  

			calendar.hide();
		}); 
    } 
     
 
    function toggle(){ 
        if(calendar.isVisible()){ 
            calendar.hide(); 
        } 
        else{ 
            calendar.show(); 
        } 
    } 
</script>
</head>	
	

<body onload="initCalendar()">
	
<input type="text" name="input" id="input" value="" /> 
<input type="text" name="input2" id="input2" value="" /> 
<img id="calendaricon" src="codebase/imgs/calendar.gif" onclick="toggle();" /> 
<div id="container"></div> 

calendar.attachEvent("onClick",function(date){ var input = document.getElementById("input"); input.value = calendar.getFormatedDate("%d.%m.%Y", date); input.value += " "+tp.getFormatedTime("%H:%i:%s"); calendar.hide(); }); function toggle(){ if(calendar.isVisible()){ calendar.hide(); } else{ calendar.show(); var dt = input.value.split(" "); if(dt.length){ calendar.setFormatedDate("%d.%m.%Y", dt[0]); calendar.tp.setFormatedTime("%H:%i:%s", dt[1]); } } }