Javascript date countdown with custom date

Question

var timer;

var compareDate = new Date();
compareDate.setDate(Date.parse('2020-06-02'));

timer = setInterval(function() {
  timeBetweenDates(compareDate);
}, 1000);

function timeBetweenDates(toDate) {
  var dateEntered = toDate;
  var now = new Date();
  var difference = dateEntered.getTime() - now.getTime();

  if (difference <= 0) {

    // Timer done
    clearInterval(timer);
  
  } else {
    
    var seconds = Math.floor(difference / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);

    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    $("#days").text(days);
    $("#hours").text(hours);
    $("#minutes").text(minutes);
    $("#seconds").text(seconds);
  }
}

body {
  background: #f5f5f5;
}
#timer {
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: #999;
  letter-spacing: -1px;
}
#timer span {
  font-size: 60px;
  color: #333;
  margin: 0 3px 0 15px;
}
#timer span:first-child {
  margin-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer">
  <span id="days"></span>days
  <span id="hours"></span>hours
  <span id="minutes"></span>minutes
  <span id="seconds"></span>seconds
</div>

Can you add more details? just having a code snippet and title doesn't mean people understand what the output should be, please check How to Ask a Good Question — ROOT
– ROOT, Commented May 31, 2020 at 4:45

Vaibhav · Accepted Answer · 2020-05-31 04:30:53Z

setDate() sets only Day of the current month in date object. You can directly provide your date string in YYYY-MM-DD format to Date() while creating new object.

var timer;

var compareDate = new Date('2020-06-02');
// compareDate.setDate(Date.parse('2020-06-02'));

timer = setInterval(function() {
  timeBetweenDates(compareDate);
}, 1000);

function timeBetweenDates(toDate) {
  var dateEntered = toDate;
  var now = new Date();
  var difference = dateEntered.getTime() - now.getTime();

  if (difference <= 0) {

    // Timer done
    clearInterval(timer);
  
  } else {
    
    var seconds = Math.floor(difference / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);

    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    $("#days").text(days);
    $("#hours").text(hours);
    $("#minutes").text(minutes);
    $("#seconds").text(seconds);
  }
}

body {
  background: #f5f5f5;
}
#timer {
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: #999;
  letter-spacing: -1px;
}
#timer span {
  font-size: 60px;
  color: #333;
  margin: 0 3px 0 15px;
}
#timer span:first-child {
  margin-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer">
  <span id="days"></span>days
  <span id="hours"></span>hours
  <span id="minutes"></span>minutes
  <span id="seconds"></span>seconds
</div>

Himanshu Pandey · Accepted Answer · 2020-05-31 04:34:31Z

1

Directly set new Date()

var compareDate = new Date('2020-06-02');

answered May 31, 2020 at 4:34

Himanshu Pandey

7082 gold badges8 silver badges15 bronze badges

Comments

Zabi Babar · Accepted Answer · 2020-05-31 04:41:01Z

1

Change

var compareDate = new Date();
compareDate.setDate(Date.parse('2020-06-02'));

to

var compareDate = new Date(2020, 05, 2);

answered May 31, 2020 at 4:41

Zabi Babar

3843 silver badges9 bronze badges

Collectives™ on Stack Overflow

Javascript date countdown with custom date

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related