Populate form fields using onClick event handler

You can set an onclick event handler

attachEvent method sets function called when specified event occurs.
In case of onclick event a function incoming argument is the date of clicked day in the calendar.

window.dhx_globalImgPath = "../../codebase/imgs/";

</script> <script src="../../codebase/dhtmlxcommon.js"></script> <script src="../../codebase/dhtmlxcalendar.js"></script> <script>

var mCal;
 
window.onload = function() {
    mCal = new dhtmlxCalendarObject('dhtmlxCalendar', false, {
        isYearEditable: true
    });
    mCal.attachEvent("onClick", mSelectDate);
    fromDate = new Date();
    fromDate.setYear(2009);
    fromDate.setMonth(0);
    fromDate.setDate(1);
    toDate = new Date();
    toDate.setYear(2013);
    toDate.setMonth(11);
    toDate.setDate(31);
    mCal.setSensitive(fromDate, toDate);
    mCal.draw();
 
}
function mSelectDate(date) {
    var jsDate = new Date(date);
    //set day;
    var dayInput = document.getElementById("day");
    dayInput.selectedIndex = jsDate.getDate() - 1
    //date is 1 based, but index is 0 based;
    //set month;
    var monInput = document.getElementById("month");
    monInput.selectedIndex = jsDate.getMonth()
    //month is 0 based;
    //set year;
    var yeaInput = document.getElementById("year");
    var yeaIndex = jsDate.getFullYear() - 2009
    //2009th was the first in list;
    yeaInput.selectedIndex = yeaIndex;
    return true;
 
}

</script> <form action=""> <table > <tr> <td valign="top"><div id="dhtmlxCalendar"></div></td> </tr> <tr> <td colspan="2"> Date:<br> <select id="day"> <option>01 <option>02 <option>03 <option>04 <option>05 <option>06 <option>07 <option>08 <option>09 <option>10 <option>11 <option>12 <option>13 <option>14 <option>15 <option>16 <option>17 <option>18 <option>19 <option>20 <option>21 <option>22 <option>23 <option>24 <option>25 <option>26 <option>27 <option>28 <option>29 <option>30 <option>31 </select> / <select id="month"> <option>Jan <option>Feb <option>Mar <option>Apr <option>May <option>Jun <option>Jul <option>Aug <option>Sep <option>Oct <option>Nov <option>Dec </select> / <select id="year"> <option>2009 <option>2010 <option>2011 <option>2012 <option>2013 </select> </td> </tr> </table> </form> <b>attachEvent</b> method sets function called when specified event occurs.<br> In case of onclick event a function incoming argument is the date of clicked day in the calendar.


Date: / /