Post
Ask Question

Changing Time Format in Kendo TimePicker

Introduction

There will be a certain scenario where, based on the user's convenience, we should provide a two-time format (12hrs/24hrs). This blog will explain how to work with Kendo Time Picker to format the time based on the user's selection of  time format.

Kendo Time Picker

Kendo Time Picker is a widget to pick the time from the control, here the code to implement the Kendo Time Picker control.

KendoTimePicker.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <base href="https://demos.telerik.com/kendo-ui/timepicker/index">  
  5.     <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>  
  6.     <title></title>  
  7.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-material.min.css" />  
  8.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.min.css" />  
  9.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.mobile.min.css" />  
  10.   
  11.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>  
  12.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>  
  13.       
  14.   
  15. </head>  
  16. <body>  
  17.   
  18.         <div id="example">  
  19.             <div class="demo-section k-content">  
  20.                   
  21.                        
  22.                <h4>Set alarm time</h4>  
  23.                 <input id="timepicker" value="12:00 AM" title="timepicker" style="width:100%;"/>  
  24.             </div>  
  25.             <script>  
  26.                 $(document).ready(function () {  
  27.                   
  28.                     $("#timepicker").kendoTimePicker({  
  29.                         dateInput: true  
  30.                     });  
  31.                 });  
  32.              
  33.             </script>  
  34.    
  35.         </div>  
  36.   
  37.   
  38. </body>  
  39. </html>  
Result  
 
 
 Figure 1 
 
Now, I'm going to include the two-time format in the Kendo Time Picker using the setOptions function based on the radio button selection.
 
KendoTimePicker.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <base href="https://demos.telerik.com/kendo-ui/timepicker/index">  
  5.     <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>  
  6.     <title></title>  
  7.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-material.min.css" />  
  8.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.min.css" />  
  9.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.mobile.min.css" />  
  10.   
  11.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>  
  12.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>  
  13.       
  14.   
  15. </head>  
  16. <body>  
  17.   
  18.         <div id="example">  
  19.             <div class="demo-section k-content">  
  20.                   
  21.                  <ul class="fieldlist">  
  22.           <li>  
  23.               <input type="radio" name="hrs" id="12hrs" value="12hrs" class="k-radio" checked="checked">  
  24.               <label class="k-radio-label" for="12hrs">12hrs</label>  
  25.           </li>  
  26.                    <li>  
  27.               <input type="radio" name="hrs" id="24hrs" value="24hrs" class="k-radio" >  
  28.               <label class="k-radio-label" for="24hrs">24hrs</label>  
  29.           </li>  
  30.               </ul>  
  31.                        
  32.                <h4>Set alarm time</h4>  
  33.                 <input id="timepicker" value="12:00 AM" title="timepicker" style="width:50%;"/>  
  34.             </div>  
  35.             <script>  
  36.                 $(document).ready(function () {  
  37.                   
  38.                     $("#timepicker").kendoTimePicker({  
  39.                         dateInput: true  
  40.                     });  
  41.                 });  
  42.               $("input[name='hrs']").click(function(){  
  43.                                  var timepicker = $("#timepicker").data("kendoTimePicker");  
  44.                             if($('input:radio[name=hrs]:checked').val() == "24hrs"){  
  45.                               
  46.   
  47.            timepicker.setOptions({  
  48.              format: 'HH: mm '  
  49.                         })  
  50.                        }  
  51.                 else  
  52.                 {  
  53.                    timepicker.setOptions({  
  54.              format: 'hh:mm tt'  
  55.                         })  
  56.                 }  
  57. });  
  58.             </script>  
  59.  <style>  
  60.         .fieldlist {  
  61.             margin: 0 0 -1em;  
  62.             padding: 0;  
  63.         }  
  64.   
  65.         .fieldlist li {  
  66.             list-style: none;  
  67.             padding-bottom: 1em;  
  68.         }  
  69.     </style>  
  70.         </div>  
  71.   
  72.   
  73. </body>  
  74. </html>  
From the above code, it is clear that based on radio button selection the time format of the Time Picker will get changed. 
 
 
Figure 2
  
I hope you have learned from this blog. Your valuable feedback, questions, or comments about this blog are always welcome.
G
M
T
 
Text-to-speech function is limited to 200 characters
Next Recommended Reading Set Default Value in Kendo Dropdown List using MVVM Pattern