JQuery

Get Selected Date From Kendo Datepicker

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  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Untitled</title>  
  6.   
  7.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.    <div id="example">  
  18.             <div class="demo-section k-content" style="text-align: center;">  
  19.                 <div id="calendar"></div>  
  20.             </div>  
  21.   
  22.             <script>  
  23.                 $("#calendar").kendoCalendar({          
  24.                 });  
  25.             </script>  
  26.         </div>  
  27. </body>  
  28. </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  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Untitled</title>  
  6.   
  7.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.    <div id="example">  
  18.             <div class="demo-section k-content" style="text-align: center;">  
  19.                 <h4>Select date</h4>  
  20.                 <div id="calendar"></div>  
  21.               <br/>  
  22.                 
  23.               <br/>  
  24.               Selected Date : <label id="lblselectedDate"> </label>  
  25.             </div>  
  26.   
  27.             <script>  
  28.                 function onChange() {  
  29.                $("#lblselectedDate").text( kendo.toString(this.value(), 'd'));  
  30.                 }  
  31.   
  32.                 $("#calendar").kendoCalendar({  
  33.                     change: onChange,  
  34.                       
  35.                 });  
  36.             </script>  
  37.         </div>  
  38. </body>  
  39. </html>  
Result
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs