<link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxcalendar.css"></link>
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxcalendar_dhx_skyblue.css"></link>
    <script src="../../codebase/dhtmlxcalendar.js"></script>
    
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css">
    <script src="../../../dhtmlxForm/codebase/dhtmlxcommon.js"></script>
    <script src="../../../dhtmlxForm/codebase/dhtmlxform.js"></script>
    <script src="../../../dhtmlxForm/codebase/ext/dhtmlxform_item_calendar.js"></script>
    <script>
var myForm,
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",
        value: "2011-06-13 11:35",
        name: "start_date",
        label: "Start Date",
        skin: "dhx_skyblue",
        readonly: true,
        enableTime: true,
        calendarPosition: "right"
    }, {
        type: "calendar",
        name: "end_date",
        label: "End Date",
        skin: "dhx_skyblue",
        value: "2011-02-10",
        dateFormat: "%Y-%m-%d",
        calendarPosition: "right"
    }];
    myForm = new dhtmlXForm("myForm", formData);
 
    myForm.attachEvent("onBeforeChange", function() {
        return true;
    });
    myForm.attachEvent("onChange", function() {
});
}</script>
 
 
    <div id="myForm" style="height:300px;"></div>