javascript - 如何使用 kendoTimePicker 和 kendodatePicker 找出两个日期之间的差异?
问题描述
我对 WebApp/HTML/JS 很陌生,想制作一个基本工具,用户可以在其中输入两个日期和时间,该工具会告诉他们差异(例如差异 = 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>
UI 看起来不错,但不知何故,计算不起作用。我认为 datePicker 和 timePicker 会给我日期对象,我可以用它来进行简单的计算。不是这样吗?谢谢您的帮助!
解决方案
推荐阅读
- opencv - Google colab 是否支持视频处理?
- spring-boot - Spring Social 成功登录后重定向问题
- c++ - std::unique_ptr 自定义删除器移动到另一个对象
- python-3.7 - 将电机与 uMongo 一起使用 :: 总是没有
- java - 在 Java 中获取“eclipse-workspace”路径
- java - 将 Spring boot Container 连接到 Mongo Container: java.net.UnknownHostException: mongo: System error?
- reporting-services - 手动设置 SSRS 报表订阅参数并希望将参数设置为 NULL
- batch-file - Windows 10 批处理文件问题
- bash - 在文件 docker 容器中使用环境变量
- rust - 如何在 Rust 中使用来自其他项目的依赖项?