Как использовать kendoTimePicker и kendodatePicker, чтобы найти разницу между двумя датами? - PullRequest
Новая
       55

Как использовать kendoTimePicker и kendodatePicker, чтобы найти разницу между двумя датами?

0 голосов
/ 10 июля 2020

Я новичок в WebApp / HTML / JS и хотел бы создать базовый c инструмент, в котором пользователь может вводить две даты и время, и инструмент сообщит им разницу (например, разница = 220 часов 40 минут). 

<!DOCTYPE html>
 
<html>
 
  <head>
 
    <meta charset="utf-8">
 
    <title>Date and Time Pickers</title>
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css">
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
 
    <style>
      body {font-family: helvetica;}
    </style>
 
  </head>
 
<body>
    
      <div>
      <script> 
          // still need to figure out how to do this
          
          // $(document).ready(function() {  //maybe don't need this  
    function calculateTime() {
            
             //create date format          
              var valuestart = $("select[name='timePicker1']"1).val();
            var valuestop = $("select[name='timePicker1']"1).val();
              
             //create date format          
             var timeStart = new Date($("select[name='datePicker1']"1).val() + valuestart);
             var timeEnd = new Date($("select[name='datePicker2']"1).val() + valuestart);
             
             var difference = timeEnd - timeStart;             
             var diff_result = new Date(difference);    
             
             var hourDiff = diff_result.getHours();
        
             $("p").html("<b>Hour Difference:</b> " + hourDiff )             
             
    }
    $("select").change(calculateTime);
    calculateTime();
    });
          
      </script>
      </div>
    
    
    
    
<div>
      <p>Einweisungsdatum</p>
      <!---datepicker first date--->
    <input id="datePicker1">
 
    <script>
 
      $(document).ready(function(){
            $('#datePicker1').kendoDatePicker({
            start: 'decade',
          depth: 'year'
        });
      });
    
  </script>
      <input id="timePicker1">
      <!---timepicker first date--->
<script>
  $(document).ready(function(){
    $('#timePicker1').kendoTimePicker();
  });
</script>
  </div>

<div>
      <p>Reinigungsdatum</p>
      <!---datepicker first date--->
    <input id="datePicker2">
 
    <script>
 
      $(document).ready(function(){
            $('#datePicker2').kendoDatePicker({
            start: 'decade',
          depth: 'year'
        });
      });
    
  </script>
      <input id="timePicker2">
      <!---timepicker first date--->
<script>
  $(document).ready(function(){
    $('#timePicker2').kendoTimePicker();
  });
</script>
  </div>
    
    <p>start</p>
    
      
  <div>
      <p>end</p>
      
      </div> 
  </body>
</html>

Пользовательский интерфейс выглядит неплохо, но почему-то расчет не работает. Я думал, что datePicker и timePicker дадут мне объекты даты, которые я мог бы использовать для простых вычислений. Разве это не так? Спасибо за помощь!

...