使用 jQuery 和 bootstrap-datetimepicker 获取两个日期,但它们之间的日差错误
Posted
技术标签:
【中文标题】使用 jQuery 和 bootstrap-datetimepicker 获取两个日期,但它们之间的日差错误【英文标题】:Using jQuery and bootstrap-datetimepicker to get two dates but got wrong day-difference between them 【发布时间】:2021-02-13 16:21:58 【问题描述】:我正在使用 bootstrap-datetimepicker 获取两个日期输入。一切正常,直到我试图获得日期之间的日差。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw=="
crossorigin="anonymous" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
integrity="sha512-aEe/ZxePawj0+G2R+AaIxgrQuKT68I28qh+wgLrcAJOz3rxCP+TwrK5SPN+E5I+1IQjNtcfvb96HDagwrKRdBw=="
crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"
integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"
integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha512-iztkobsvnjKfAtTNdHkGVjAYTrrtlC7mGp/54c40wowO7LhURYl3gVzzcEqGl/qKXQltJ2HwMrdLcNUdo+N/RQ=="
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"
integrity="sha512-GDey37RZAxFkpFeJorEUwNoIbkTwsyC736KNSYucu1WJWFK9qTdzYub8ATxktr6Dwke7nbFaioypzbDOQykoRg=="
crossorigin="anonymous"></script>
</head>
<body>
<div class='input-group date' id='checkin'>
<input type='text' class="form-control" id="checkinDate" /> <span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='checkout'>
<input type='text' class="form-control" id="checkoutDate" /> <span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function ()
$('#checkin').datetimepicker(
format: 'DD/MM/YYYY'
);
$('#checkout').datetimepicker(
format: 'DD/MM/YYYY'
);
);
$('#checkout').on('dp.change', function (e) updateVal(); );
$("#checkoutDate").on('change keydown paste input', function ()
updateVal();
);
function updateVal()
var start = $("#checkinDate").val();
var startD = new Date(start);
var end = $("#checkoutDate").val();
var endD = new Date(end);
var oneDay = 24 * 60 * 60 * 1000;
var diffDays = Math.round(Math.abs((startD - endD) / oneDay));
console.log(diffDays + ' days');
</script>
</body>
</html>
如果我使用上面的代码,01/10/2020 和 02/10/2020 之间的差异是 31 天。
如果 2020 年 10 月 31 日和 2020 年 1 月 10 日,输出将简单地变为“NaN 天”。
有什么建议吗?谢谢。
【问题讨论】:
01/10/2020
和 02/10/2020
的区别是 31 天是真的,为什么?因为你转换成new Date()
构造函数和格式变成了MM/DD/YYYY
【参考方案1】:
想知道为什么在使用像moment.js
这样的纯库时要手动计算差异,无论如何,您可以使用start.diff(end, 'days')
轻松获得,看看这个:
$(function()
$('#checkin').datetimepicker(
format: 'DD/MM/YYYY'
);
$('#checkout').datetimepicker(
format: 'DD/MM/YYYY'
);
);
$('#checkout').on('dp.change', function(e)
updateVal();
);
$("#checkoutDate").on('change keydown paste input', function()
updateVal();
);
function updateVal()
var start = moment($("#checkinDate").val(), 'DD/MM/YYYY');
var end = moment($("#checkoutDate").val(), 'DD/MM/YYYY');
var diffDays = start.diff(end, 'days');
console.log(diffDays, 'days');
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha512-aEe/ZxePawj0+G2R+AaIxgrQuKT68I28qh+wgLrcAJOz3rxCP+TwrK5SPN+E5I+1IQjNtcfvb96HDagwrKRdBw==" crossorigin="anonymous"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha512-iztkobsvnjKfAtTNdHkGVjAYTrrtlC7mGp/54c40wowO7LhURYl3gVzzcEqGl/qKXQltJ2HwMrdLcNUdo+N/RQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha512-GDey37RZAxFkpFeJorEUwNoIbkTwsyC736KNSYucu1WJWFK9qTdzYub8ATxktr6Dwke7nbFaioypzbDOQykoRg==" crossorigin="anonymous"></script>
<div class='input-group date' id='checkin'>
<input type='text' class="form-control" id="checkinDate" value="31/10/2020" /> <span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='checkout'>
<input type='text' class="form-control" id="checkoutDate" value="01/10/2020" /> <span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
【讨论】:
以上是关于使用 jQuery 和 bootstrap-datetimepicker 获取两个日期,但它们之间的日差错误的主要内容,如果未能解决你的问题,请参考以下文章
JQuery:通过noConflict()方法同时使用jQuery 和其他框架
JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个
使用 jquery panzoom 和 jquery 可拖动