Kendo Grid and Chart

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<div class="k-content">
    <label for="startdatetimepicker">From:
        <input id="startdatetimepicker" />
    </label>
    <br/>
    <label for="enddatetimepicker">To:
        <input id="enddatetimepicker" />
    </label>
    <br/>
</div>
<div id="grid"></div>

CSS

* {
    font-size: 10pt;
}

JavaScript

function startChange() {
      var startDate = k_startdatetimepicker.value(),
          endDate = k_enddatetimepicker.value();

      if (startDate) {
          startDate = new Date(startDate);
          startDate.setDate(startDate.getDate());
          k_enddatetimepicker.min(startDate);
      } else if (endDate) {
          k_startdatetimepicker.max(new Date(endDate));
      } else {
          endDate = new Date();
          k_startdatetimepicker.max(endDate);
          k_enddatetimepicker.min(endDate);
      }
  }

  function endChange() {
      var endDate = k_enddatetimepicker.value(),
          startDate = k_startdatetimepicker.value();
      console.log(endDate, startDate);

      if (endDate) {
          endDate = new Date(endDate);
          endDate.setDate(endDate.getDate());
          k_startdatetimepicker.max(endDate);
      } else if (startDate) {
          k_enddatetimepicker.min(new Date(startDate));
      } else {
          endDate = new Date();
          k_startdatetimepicker.max(endDate);
          k_enddatetimepicker.min(endDate);
      }
  }


  var k_startdatetimepicker = $("#startdatetimepicker").kendoDateTimePicker({

      change: startChange,
      showSecond: true,
      dateFormat: "dd-mm-yy",
      timeFormat: "HH:mm:ss",
      format: "dd-MM-yy HH:mm:ss"
  }).data("kendoDateTimePicker");


  var k_enddatetimepicker = $("#enddatetimepicker").kendoDateTimePicker({

      change: endChange,
      showSecond: true,
      dateFormat: "dd-mm-yy",
      timeFormat: "HH:mm:ss",
      format: "dd-MM-yy HH:mm:ss"
  }).data("kendoDateTimePicker");


  var result = $("#grid").kendoGrid({
      filterable: true,


      columns: [{
          field: "FirstName",
          title: "First Name"
      }, {
          field: "LastName",
          title: "Last Name"
      }, {
          field: "dob",
          title: "DOB",
          format: "{0:dd-MM-yy HH:mm:ss}"
      }],
      dataSource: {
          data: [{
              FirstName: "Joe",
          ...