This example shows the calendar read from multiple date/time fields and returns selected date/time value to the fields.

Click on the "Pick" button to shows the calendar.

Example code:

                //creates the calendar.
                <script>
                  //on calendar show event, read and parse the date from multiple date fields.
                  function onCalendarShow() {
                    var sMonth=document.getElementById("stMonth");
                    var sDate=document.getElementById("stDate");
                    var sYear=document.getElementById("stYear");
                    var sHours=document.getElementById("stHours");
                    var sMinutes=document.getElementById("stMinutes");
                    var sdt=sMonth.value+"/"+sDate.value+"/"+sYear.value+" "+sHours.value+":"+sMinutes.value;
                    var dt=AOCalendar.parseDate(sdt, "$dm/$dd/$YY $HH:$mi");
                    if(dt) this.setDate(dt);
                  }

                  //on calendar date change event, return the date to multiple date fields.
                  function onDateChange() {
                    var sMonth=document.getElementById("stMonth");
                    var sDate=document.getElementById("stDate");
                    var sYear=document.getElementById("stYear");
                    var sHours=document.getElementById("stHours");
                    var sMinutes=document.getElementById("stMinutes");

                    var dt=this.getSelDate();
                    sMonth.value=$aoPad("00", dt.getMonth()+1);
                    sDate.value=$aoPad("00", dt.getDate());
                    sYear.value=dt.getFullYear();
                    sHours.value=$aoPad("00", dt.getHours());
                    sMinutes.value=$aoPad("00", dt.getMinutes());
                  }

                  //initialize calendar.
                  var cal=new AOCalendar("cal1");
                  cal.opt.themeDir="../themes/prof/";
                  cal.opt.enableTime=true;
                  cal.opt.topSelDate=false;
                  cal.onShow=onCalendarShow;
                  cal.onChange=onDateChange;
                  cal.render();

                </script>