Post
Ask Question

Reset the value in Kendo Datepicker using MVVM Pattern

We can reset the value of kendo date picker by following two method
 
1. using the date picker id, 
  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.1.412/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <div id="example">  
  18.   <input id="to" data-role="datepicker"  
  19.                  data-bind="visible: isVisible"  
  20.                                
  21.                    style="width: 100%">  
  22.     <br/>  
  23.      <button class=k-button  data-bind="click:ResetControl" >Clear Search</button>  
  24.   </div>  
  25.     
  26.   
  27.   <script>  
  28.      var viewModel = kendo.observable({  
  29.           
  30.         isVisible: true,  
  31.            ResetControl:function(e)  
  32.        {  
  33.           
  34.          e.preventDefault();  
  35.          $("#to").val('')  
  36.          
  37.        }  
  38.           
  39.     });  
  40.     kendo.bind($("#example"), viewModel);  
  41.   </script>  
  42. </body>  
  43. </html>   
2. using CSS class  
  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.1.412/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <div id="example">  
  18.   <input id="to" data-role="datepicker"  
  19.                  data-bind="visible: isVisible"  
  20.                                
  21.                    style="width: 100%">  
  22.     <br/>  
  23.      <button class=k-button  data-bind="click:ResetControl" >Clear Search</button>  
  24.   </div>  
  25.     
  26.   
  27.   <script>  
  28.      var viewModel = kendo.observable({  
  29.           
  30.         isVisible: true,  
  31.            ResetControl:function(e)  
  32.        {  
  33.           
  34.          e.preventDefault();  
  35.           
  36.          $(".k-datepicker input").val('') 
  37.        }  
  38.           
  39.     });  
  40.     kendo.bind($("#example"), viewModel);  
  41.   </script>  
  42. </body>  
  43. </html>