如何从 2 个用户输入中获取天数,然后将其乘以另一个用户输入,即 JavaScript 中的天数?

How do I get the number of days from 2 user inputs and then multiply it with another user input which is amount in JavaScript?

我正在尝试创建一个简单的精细计算器,我有两个用户输入日期和一个用户输入金额。 我需要减去 2 个日期,然后将天数乘以罚款金额。我浏览了一堆关于日期的视频,但其中 none 曾经接受过用户输入。我是 javascript 的新手,所以我不知道为什么它不显示我的结果。有人可以告诉我我的代码有什么问题吗?

if (isset($_POST['calcDiff'])) {
  $("#bdate").datetimepicker({
    timepicker: false,
    format: 'y-m-d'


  });

  $("#rdate").datetimepicker({

    timepicker: false,
    format: 'y-m-d'
  });

  function calcDiff() {

    var bdate = new Date($("#bdate").val());
    var rdate = new Date($("#rdate").val());
    var amount = $('#amount').val();

    var timeDifference = rdate.getTime() - bdate.getTime();
    var milliSecondsInOneSecond = 1000;
    var secondInOneHour = 3600;
    var hourInOneDay = 24;

    var daysDiff = timeDifference / (milliSecondsInOneSecond * secondInOneHour * hourInOneDay);
    var fine = daysDiff * amount.val();
    alert(fine);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="finecalc" action="" method="post">
  <p>
    Borrowed date
    <input type="date" name="bdate" id="bdate" required="required" value="<?php echo $bdate; ?>" />
  </p>
  <p>
    Return date</b>
    <input type="date" name="rdate" id="rdate" required="required" value="<?php echo $rdate; ?>" /> <b>
    </p>
     <p>Enter fine amount per day</b>
    <input type="text" name="amount" size="10"><b>
       </p><button onclick="calcDiff()">Calculate Fine</button><p id="display"></p>
</form>

var amount = $('#amount').val();
...
var fine = daysDiff * amount.val();

也许不需要使用amount.val()

var fine = daysDiff * amount;

此外,删除此行中的逗号:

var daysDiff = timeDifference / (, milliSecondsInOneSecond * secondInOneHour * hourInOneDay);

首先你需要计算两个日期和总天数的差值

const date1 = new Date('7/13/2010');
const date2 = new Date('12/15/2010');
const diffTime = Math.abs(date2 - date1);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); // calculate number of days 
console.log(diffDays + " days");
var amount = $('#amount').val(); //store Amount value into amount variable

然后算好: var fine = daysDiff * amount;

您可以从每个输入中获取值,然后实际上只需减去日期即可得到纪元差异,并使用该数字将其转换为天数并乘以罚款。

我添加了一个 JS 来执行此操作。

function calcDiff(){
  const date1 = new Date(document.querySelector('#bdate').value);
  const date2 = new Date(document.querySelector('#rdate').value);
  const penalty = document.querySelector('input[name="amount"]').value;
  const diff_ms = date2 - date1;
 // ms -> s -> min -> h -> days
  const days = diff_ms / 1000 / 60 / 60 / 24; 
  const amount_to_pay = days * penalty;
  console.log('$' + amount_to_pay);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="finecalc" action="" method="post">
  <p>
    Borrowed date
    <input type="date" name="bdate" id="bdate" required="required" value="<?php echo $bdate; ?>" />
  </p>
  <p>
    Return date</b>
    <input type="date" name="rdate" id="rdate" required="required" value="<?php echo $rdate; ?>" /> <b>
    </p>
     <p>Enter fine amount per day</b>
    <input type="text" name="amount" size="10"><b>
       </p><button type="button" onclick="calcDiff()">Calculate Fine</button><p id="display"></p>
</form>

这就是我的工作,感谢所有帮助过的人。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="enterbooks.css" />
</head>
<body style="background: url(library.png); background-size: 100%;">
    <div class="content">
        <h1>Hey admin calulate you fines here!</h1>
        <script>
            function calcDiff() {

                const date1 = new Date(document.querySelector('#bdate').value);
                const date2 = new Date(document.querySelector('#rdate').value);
                const penalty = document.querySelector('input[name="amount"]').value;
                const diff_ms = date2 - date1;
                // ms -> s -> min -> h -> days
                const days = diff_ms / 1000 / 60 / 60 / 24;
                const amount_to_pay = days * penalty;

                alert(amount_to_pay);

            }
        </script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <form name="finecalc" action="" method="post">
            <p>
                Borrowed date
                <input type="date" id="bdate" required="required" value="<?php echo $bdate; ?>" />
            </p>
            <p>
                Return date</b>
                <input type="date" id="rdate" required="required" value="<?php echo $rdate; ?>" /> <b>
            </p>
            <p>Enter fine amount per day</b>
                <input type="text" name="amount" size="10"><b>
            </p><button type="button" onclick="calcDiff()">Calculate Fine</button>
            <p id="display"></p>
        </form>
    </div>
</body>
</html>