<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxCalendar/codebase/dhtmlxcalendar.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css">
    <script src="../../../dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <script src="../../codebase/ext/dhtmlxform_item_calendar.js"></script>
    <style>
        td.p2 {
            padding-left: 50px;
        }
    </style>
    <script>
var myForm,
myForm2,
formData;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 120,
        inputWidth: 120
    }, {
        type: "input",
        label: "Name",
        value: "John Smith"
    }, {
        type: "password",
        label: "Password",
        value: "123"
    }, {
        type: "select",
        label: "Session",
        options: [{
            value: "1",
            text: "Administration"
        }, {
            value: "2",
            text: "Design"
        }, {
            value: "3",
            text: "Manage Articles"
        }]
        }, {
        type: "calendar",
        dateFormat: "%Y-%m-%d %H:%i",
        name: "start_date",
        label: "Start Date",
        value: "2011-06-20 14:38",
        enableTime: true,
        calendarPosition: "right"
    }, {
        type: "calendar",
        name: "end_date",
        label: "End Date",
        dateFormat: "%Y-%m-%d",
        serverDateFormat: "%d.%m.%Y",
        value: "20.06.2011",
        calendarPosition: "right"
    }];
    myForm = new dhtmlXForm("myForm", formData);
    myForm2 = new dhtmlXForm("myForm2");
    myForm2.loadStruct("../common/dhxform_calendar.xml?e=" + new Date().getTime());
}
function doOnUnload() {
    myForm.unload();
    myForm2.unload();
    myForm = null;
    myForm2 = null;
}</script>
 
 
    <table>
        <tr>
            <td>From JSON</td>
            <td class="p2">From XML</td>
        </tr>
        <tr>
            <td valign="top"><div id="myForm" style="height:330px;"></div></td>
            <td valign="top" class="p2"><div id="myForm2" style="height:330px;"></div></td>
        </tr>
    </table>