Get Selected Date From Kendo Datepicker

Gowtham K
8y
4.7k
0
1

Blog

This blog will explain how to get selected date from Kendo datepicker from the on change event. Let's start with implementing the kendo datepicker using jQuery.

Create a new HTML page. In my case I named it as KendoDatepicker.html and write the following code in it

KendoDatepicker.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div class="demo-section k-content" style="text-align: center;">
<div id="calendar"></div>
</div>
<script>
$("#calendar").kendoCalendar({
});
</script>
</div>
</body>
</html>

The above code is used to implement the kendo datepicker

Result

Now, our ultimate aim is to get the selected date from the kendo datepicker which can be achieved through on change event.

KendoDatepicker.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div class="demo-section k-content" style="text-align: center;">
<h4>Select date</h4>
<div id="calendar"></div>
<br/>
<br/>
Selected Date : <label id="lblselectedDate"> </label>
</div>
<script>
function onChange() {
$("#lblselectedDate").text( kendo.toString(this.value(), 'd'));
}
$("#calendar").kendoCalendar({
change: onChange,
});
</script>
</div>
</body>
</html>

Result

Up Next

Select Multiple Dates in jQuery Date Picker

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all