DHTMLX Docs & Samples Explorer

### Set interval with two inputs

From Till
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>
        <style>
            input#date_from, input#date_to {
                font-family: Tahoma;
                font-size: 12px;
                background-color: #fafafa;
                border: #c0c0c0 1px solid;
                width: 100px;
            }
            span.label {
                font-family: Tahoma;
                font-size: 12px;
            }
        </style>
        <script>var myCalendar;
    function doOnLoad() {
        myCalendar = new dhtmlXCalendarObject(["date_from", "date_to"]);
        myCalendar.hideTime();
        // init values
        var t = new Date();
        byId("date_from").value = myCalendar.getFormatedDate(null, t);
        t.setDate(t.getDate() + 10);
        byId("date_to").value = myCalendar.getFormatedDate(null, t);
    }

    function setSens(id, k) {
        // update range
        if (k == "min") {
            myCalendar.setSensitiveRange(byId(id).value, null);
        } else {
            myCalendar.setSensitiveRange(null, byId(id).value);
        }
    }
    function byId(id) {
        return document.getElementById(id);
    }</script>

        <span class="label">From</span> <input type="text" id="date_from" onclick="setSens('date_to', 'max');" readonly="true">
        <span class="label">Till</span> <input type="text" id="date_to" onclick="setSens('date_from', 'min');" readonly="true">