DHTMLX Docs & Samples Explorer

### Use in form

Source

    <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"
        }, {
            type: "calendar",
            name: "empty_date",
            label: "Empty Date Test",
            skin: "dhx_skyblue",
            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>