<link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxcalendar.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxcalendar_dhx_skyblue.css">
    <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.setDate("2013-03-10");
    myCalendar.hideTime();
    // init values
    var t = new Date();
    byId("date_from").value = "2013-03-05";
    byId("date_to").value = "2013-03-15";
}
 
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">