<input id="fromDate" />
<input id="toDate" />
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2016, 1, 1)},
      { value: 2, category: "Two", date: new Date(2016, 3, 1)}
    ]
  },
  dateField: "date",
  series: [{
      type: "line",
      field: "value",
      name: "Value"
  }],
  navigator: {
      series: [{
          type: "area",
          field: "value",
          name: "Value"
      }]
  }
});

function selectRange() {
    navi.select(
        $("#fromDate").data("kendoDatePicker").value(),
        $("#toDate").data("kendoDatePicker").value()
    );
}

var chart = $("#stock-chart").data("kendoStockChart");
var navi = chart.navigator;

$("#fromDate").kendoDatePicker({
    value: navi.select().from,
    change: selectRange
});

$("#toDate").kendoDatePicker({
    value: navi.select().to,
    change: selectRange
});
</script>