Kendo Grid and Chart
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 = startdatetimepicker.value(),
endDate = enddatetimepicker.value();
if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate());
enddatetimepicker.min(startDate);
} else if (endDate) {
startdatetimepicker.max(new Date(endDate));
} else {
endDate = new Date();
startdatetimepicker.max(endDate);
enddatetimepicker.min(endDate);
}
}
function endChange() {
var endDate = enddatetimepicker.value(),
startDate = startdatetimepicker.value();
if (endDate) {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate());
startdatetimepicker.max(endDate);
} else if (startDate) {
enddatetimepicker.min(new Date(startDate));
} else {
endDate = new Date();
startdatetimepicker.max(endDate);
enddatetimepicker.min(endDate);
}
}
$("#startdatetimepicker").kendoDateTimePicker({
change: startChange,
showSecond: true,
dateFormat: "dd-mm-yy",
timeFormat: "HH:mm:ss",
format : "dd-MM-yy HH:mm:ss"}).data("kendoDateTimePicker");
$("#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({
...