title: How to use kendoTimePicker and kendodatePicker to find difference between two dates?
body: <p>I am quite new to WebApp/HTML/JS and would like to make a basic tool where a user can enter two dates and times, and the tool will tell them the difference (so for example difference= 220 hours 40 minutes).</p>
  <pre><code>&lt;!DOCTYPE html&gt;
   
  &lt;html&gt;
   
    &lt;head&gt;
   
      &lt;meta charset=&quot;utf-8&quot;&gt;
   
      &lt;title&gt;Date and Time Pickers&lt;/title&gt;
   
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css&quot;&gt;
      &lt;script src=&quot;https://code.jquery.com/jquery-1.12.3.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js&quot;&gt;&lt;/script&gt;
   
      &lt;style&gt;
        body {font-family: helvetica;}
      &lt;/style&gt;
   
    &lt;/head&gt;
   
  &lt;body&gt;
      
        &lt;div&gt;
        &lt;script&gt; 
            // still need to figure out how to do this
            
            // $(document).ready(function() {  //maybe don't need this  
      function calculateTime() {
              
               //create date format          
                var valuestart = $(&quot;select[name='timePicker1']&quot;1).val();
              var valuestop = $(&quot;select[name='timePicker1']&quot;1).val();
                
               //create date format          
               var timeStart = new Date($(&quot;select[name='datePicker1']&quot;1).val() + valuestart);
               var timeEnd = new Date($(&quot;select[name='datePicker2']&quot;1).val() + valuestart);
               
               var difference = timeEnd - timeStart;             
               var diff_result = new Date(difference);    
               
               var hourDiff = diff_result.getHours();
          
               $(&quot;p&quot;).html(&quot;&lt;b&gt;Hour Difference:&lt;/b&gt; &quot; + hourDiff )             
               
      }
      $(&quot;select&quot;).change(calculateTime);
      calculateTime();
      });
            
        &lt;/script&gt;
        &lt;/div&gt;
      
      
      
      
  &lt;div&gt;
        &lt;p&gt;Einweisungsdatum&lt;/p&gt;
        &lt;!---datepicker first date---&gt;
      &lt;input id=&quot;datePicker1&quot;&gt;
   
      &lt;script&gt;
   
        $(document).ready(function(){
              $('#datePicker1').kendoDatePicker({
              start: 'decade',
            depth: 'year'
          });
        });
      
    &lt;/script&gt;
        &lt;input id=&quot;timePicker1&quot;&gt;
        &lt;!---timepicker first date---&gt;
  &lt;script&gt;
    $(document).ready(function(){
      $('#timePicker1').kendoTimePicker();
    });
  &lt;/script&gt;
    &lt;/div&gt;
  
  &lt;div&gt;
        &lt;p&gt;Reinigungsdatum&lt;/p&gt;
        &lt;!---datepicker first date---&gt;
      &lt;input id=&quot;datePicker2&quot;&gt;
   
      &lt;script&gt;
   
        $(document).ready(function(){
              $('#datePicker2').kendoDatePicker({
              start: 'decade',
            depth: 'year'
          });
        });
      
    &lt;/script&gt;
        &lt;input id=&quot;timePicker2&quot;&gt;
        &lt;!---timepicker first date---&gt;
  &lt;script&gt;
    $(document).ready(function(){
      $('#timePicker2').kendoTimePicker();
    });
  &lt;/script&gt;
    &lt;/div&gt;
      
      &lt;p&gt;start&lt;/p&gt;
      
        
    &lt;div&gt;
        &lt;p&gt;end&lt;/p&gt;
        
        &lt;/div&gt; 
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The UI looks good, but somehow the calculation won't work. I thought that datePicker and timePicker would give me date objects, which I could use for a simple calculation. Is this not the case ?
  Thanks for the help!</p>