Javascript 使用jQuery和bootstrap datetimepicker获取两个日期，但它们之间的日差错误_Javascript_Html_Jquery_Twitter Bootstrap 3_Bootstrap Datetimepicker

Javascript 使用jQuery和bootstrap datetimepicker获取两个日期，但它们之间的日差错误

javascript html jquery twitter-bootstrap-3

Javascript 使用jQuery和bootstrap datetimepicker获取两个日期，但它们之间的日差错误,javascript,html,jquery,twitter-bootstrap-3,bootstrap-datetimepicker,Javascript,Html,Jquery,Twitter Bootstrap 3,Bootstrap Datetimepicker,我使用引导datetimepicker获取两个日期输入。在我试图计算日期之间的日差之前，一切都是有效的 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.m

我使用引导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>


$（函数（）{
$（“#签入”）.datetimepicker({
格式：“DD/MM/YYYY”
});
$（“#签出”）.datetimepicker({
格式：“DD/MM/YYYY”
});
});
$（'#checkout'）.on（'dp.change'，函数（e）{updateVal（）；}）；
$（“#签出日期”）。在（'change keydown paste input'，函数（）{
updateVal（）；
});
函数updateVal（）{
var start=$（“#checkinDate”）.val（）；
var startD=新日期（开始）；
var end=$（“#签出日期”）.val（）；
var endD=新日期（结束）；
var One Day=24*60*60*1000；
var diffDays=Math.round（Math.abs（（startD-endD）/oneDay））；
console.log（diffDays+“days”）；
}

如果我使用上述代码，2020年10月1日和2020年10月2日之间的差异为31天

如果是2020年10月31日和2020年10月1日，则输出将变为“NaN天”

有什么建议吗？谢谢。

想知道为什么在使用纯库（如

矩.js

）时手动计算差异，无论如何，您可以使用

start.diff（end，'days'）

轻松获得差异，请查看以下内容：

$（函数（）{
$（“#签入”）.datetimepicker({
格式：“DD/MM/YYYY”
});
$（“#签出”）.datetimepicker({
格式：“DD/MM/YYYY”
});
});
$（“#checkout”）.on（'dp.change'，函数（e）{
updateVal（）；
});
$（“#签出日期”）。在（'change keydown paste input'，function（）上{
updateVal（）；
});
函数updateVal（）{
var start=力矩（$（“#checkinDate”）.val（），'DD/MM/YYYY'）；
var end=力矩（$（“#checkoutDate”）.val（），'DD/MM/YYYY'）；
var diffDays=start.diff（end，“days”）；
日志（diffDays，“days”）；
}

2020年10月1日和2020年10月2日之间的差异是31天，这是真的，为什么？。因为您已转换为

new Date（）

构造函数，格式为MM/DD/YYYY