Jquery is getting the incorrect difference between now and a future date

user_5364300 0
Viewed 79

I tried to code a counter. For the first value it should show the difference between today and a future date. Out of some reason its showing an complete wrong difference. Do you know why?

The set future date 2th october 2020 should output a difference of 15 days and not over 40.

const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
const firstDate = new Date(2020, 10, 02);
const secondDate = new Date();
const diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay));
jQuery('#reducedaily').text(diffDays);

jQuery('.count, .count2').each(function () {
  jQuery(this).prop('Counter',0).animate({
    Counter: jQuery(this).text()
  }, {
      duration: 4000,
      easing: 'swing',
      step: function (now) {
        if(jQuery(this).hasClass('count')){
          jQuery(this).text(now.toFixed(0));
        }
        else{
          jQuery(this).text(now.toFixed(1));
        }
      }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="counterbackground" class="shadow">
<div class="counterdiv"><span class="count countervalue" id="reducedaily">239</span><br> <span class="counterdescription">Tage bis zum Event<br> (2.10.2020)</span></div>
</div>

date jquery javascript
1 Answers

When using the "month" parameter in the Date function in your jQuery, months are 0-indexed so they start at 0 instead of 1 as you might expect. So when you pass in 10, that actually represents November instead of October - this is why you got 30 extra days than you expected.

There are many ways to specify the date (see MDN Web Docs for Date). For example any of these will create a date object for 02 October 2020:

firstDate = new Date(2020, 09, 02);     // when using the month param, it is (month-1)
firstDate = new Date("2020-10-02");     // note you DO use "10" in a date string
firstDate = new Date("10/02/2020");     // note mm/dd/yyyy format
firstDate = new Date("2 October 2020"); // or you can use text

Working Example with your code

const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
const firstDate = new Date(2020, 09, 02);
const secondDate = new Date();
const diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay));
jQuery('#reducedaily').text(diffDays);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="counterdiv"><span class="count countervalue" id="reducedaily">239</span><br> <span class="counterdescription">Tage bis zum Event<br>(2.10.2020)</span></div>

Working Example to test date strings

const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
const secondDate = new Date();

$("#testdate").on("click", function() {
   dateStr = $("#date_to_check").val(); 
   showDate(dateStr, "days_left");
});

   
showDate("2020-10-02", "days_left_test");
showDate("10/02/2020", "days_left_test");
showDate("2 October 2020", "days_left_test");
showDate("October 02 2020", "days_left_test");

function showDate(dateStr, elid){
    document.getElementById(elid).innerHTML += "Date: <b>"+dateStr+" </b> &nbsp;&nbsp;&nbsp; Days left: <b>"+ Math.round(Math.abs((new Date(dateStr) - secondDate) / oneDay))+"</b><br>";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<p>Test a date:</p>
<input type="text" id="date_to_check" placeholder="Enter date string">
<button id="testdate">Test</button>
<div id="days_left" style="margin-bottom: 20px"></div>

<p><b>More date Tests:</b></p>
<div id="days_left_test"></div>

user_5148780
Related