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?

Question

I'm trying to create a simple fine calculator, I have two user input dates and a user input amount. I need to subtract the 2 dates and then multiply the number of days by the fine amount. I went through a bunch of videos about dates, but none of them ever take user input. I am very new to javascript so I don't know why it won't show me my result. Could someone tell me what's wrong with my code?

 if (isset($_POST['calcDiff'])) { $("#bdate").datetimepicker({ timepicker: false, format: 'ymd' }); $("#rdate").datetimepicker({ timepicker: false, format: 'ymd' }); 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>

Answer 1

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

Maybe no need to use amount.val() ?

var fine = daysDiff * amount;

Also, remove the comma in this line:

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

Answer 2

First you need to calculate difference between 2 dates and total number of days

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

Then calculate fine: var fine = daysDiff * amount;

Answer 3

You can get the value from each input, then actually just subtract the dates to get the epoch difference and with that number you can convert it to days and multiply by the fine.

I added a JS that does just that.

 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>

Answer 4

This is what wound up working for me, thank you to all that helped.

<!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>

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?

Question

4 answers

solution1
0 2021-09-25 05:30:43

solution2
0 2021-09-25 05:43:22

solution3
0 ACCPTED 2021-09-25 05:53:29

solution4
-1 2021-09-25 07:43:32

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?

Question

4 answers

solution1 0 2021-09-25 05:30:43

solution2 0 2021-09-25 05:43:22

solution3 0 ACCPTED 2021-09-25 05:53:29

solution4 -1 2021-09-25 07:43:32

solution1
0 2021-09-25 05:30:43

solution2
0 2021-09-25 05:43:22

solution3
0 ACCPTED 2021-09-25 05:53:29

solution4
-1 2021-09-25 07:43:32