DHTMLX Docs & Samples Explorer

### Operations with Calendar attached to input

You can attach calendar to input object.

Arrival Date:
Stay for days
Departure Date:
Source

    <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxcalendar.css">
    <script>window.dhx_globalImgPath = "../../codebase/imgs/";</script>
    <script  src="../../codebase/dhtmlxcommon.js"></script>
    <script  src="../../codebase/dhtmlxcalendar.js"></script>
    <script>var cal1;
    window.onload = function() {
        cal1 = new dhtmlxCalendarObject('calInput1');
        cal1.attachEvent("onClick", function(date) {
            calDeptDate(date);
        });
    }
    function calDeptDate(date) {
        var d = new Date(date);
        d.setDate(d.getDate() + parseInt(document.getElementById("stay_days").value));
        document.getElementById("dept_date").innerHTML = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
    }</script>

    <div>Arrival Date:</div>
    <input type="text" id="calInput1" style="width: 200px; font-size:12px;" readonly="true">
    <br>
    <br>
    <div>Stay for
    <input type="text" id="stay_days" style="width: 40px; font-size:12px;" onblur="calDeptDate(cal1.getDate())" value="1"> days</div>
    <br>
    <div>Departure Date:</div>
    <div id="dept_date"></div>
    <br>