<script type="text/javascript" src="../../codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../codebase/dhtmlxtoolbar.js"></script>
<script type="text/javascript" src="../../../dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxtoolbar_dhx_skyblue.css"/>
<link rel="stylesheet" type="text/css" href="../../../dhtmlxCalendar/codebase/dhtmlxcalendar.css"/>
<link rel="stylesheet" type="text/css" href="../../../dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css"/>
<script>
var myToolbar;
var myCalendar;
var input_from;
var input_till;
function doOnLoad() {
    myToolbar = new dhtmlXToolbarObject("toolbarObj");
    myToolbar.setIconsPath("../common/imgs/");
    myToolbar.addText("text_from", null, "From");
    myToolbar.addInput("date_from", null, "02.07.2012", 75);
    myToolbar.addText("text_till", null, "Till");
    myToolbar.addInput("date_till", null, "13.07.2012", 75);
    myToolbar.addButton("button_apply", null, "Apply Filter", "save.gif");
    // get inputs;
    input_from = myToolbar.getInput("date_from");
    input_from.setAttribute("readOnly", "true");
    input_from.onclick = function() {
        setSens(input_till, "max");
    }
    input_till = myToolbar.getInput("date_till");
    input_till.setAttribute("readOnly", "true");
    input_till.onclick = function() {
        setSens(input_from, "min");
    }
    // init calendar;
    myCalendar = new dhtmlXCalendarObject([input_from, input_till]);
    myCalendar.setDateFormat("%d.%m.%Y");
 
}
// add logic for selecting range (see the same logic here dhtmlxCalendar/samples/01_init_and_usage/14_set_interval_with_two_inputs.html);
function setSens(inp, k) {
    if (k == "min") {
        myCalendar.setSensitiveRange(inp.value, null);
    } else {
        myCalendar.setSensitiveRange(null, inp.value);
    }
}</script>
 
<div style="height: 500px;"><div id="toolbarObj"></div></div>