<link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxcalendar.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxcalendar_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css">
    
    <script src="../../codebase/dhtmlxcalendar.js"></script>
    <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: "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"
    }, {
        type: "calendar",
        name: "with_icon",
        label: "With Icon",
        skin: "dhx_skyblue",
        dateFormat: "%Y-%m-%d",
        value: "2013-06-01",
        calendarPosition: "right"
    }
];
    myForm = new dhtmlXForm("myForm", formData);
    // icon for last,
    // also input in a form have ".calendar" css postfix
    myForm.getInput("with_icon").style.backgroundImage = "url(../common/calendar.gif)";
    myForm.getInput("with_icon").style.backgroundPosition = "center right";
    myForm.getInput("with_icon").style.backgroundRepeat = "no-repeat";
 
}</script>
 
 
    <div id="myForm" style="height:300px;"></div>