jQuery Countdown get time until 10:00 am today or tomorrow

Question

I need a little script and I am a little confused.

I want to use this plugin: http://keith-wood.name/countdown.html

Goal: Have a Countdown, that counts from now to 10:00 am - if it's 0-9:59:59 am count to 10 o'clock today if it's after 10:00:00 count to 10:00 tomorrow. Is that understandable?

Here's what I need with javascript / jquery (this will not work, i know):

var currentDate = new Date(new Date().getTime());
var hours = currentDate.getHours();
var endTime;
    if(hours >= 10){
        endTime = give me next day 10:00
    } else {
        endTime = give me this day 10:00
    }
$("#countdown").countdown({until: endTime, format: 'HMS'});

Please check this question it may help https://stackoverflow.com/questions/1787939/check-time-difference-in-javascript — Mohanad Inairat, May 24 '17 at 08:16

score 2 · Answer 1 · answered May 24 '17 at 08:19

2

The following should work (console.log() was added for testing purposes). Beware that it will use the timezone of the browser instead of UTC time.

var currentDate = new Date(new Date().getTime());
var hours = currentDate.getHours();
var endTime = new Date(currentDate);
endTime.setMinutes(0);
endTime.setSeconds(0);
endTime.setHours(10);

if(hours >= 10){
    endTime.setDate(endTime.getDate() + 1);
}
console.log(endTime);
$("#countdown").countdown({until: endTime, format: 'HMS'});

answered May 24 '17 at 08:19

Pieter De Clercq

1,951
1
17
29

It works for the next day, but not for the current day. If you change 10 o'clock to 12 or later it doesn't work anymore... – MrLumbergh May 24 '17 at 08:54
Make sure to change the 10 to 12 both at the `endTime.setHours()` AND at the `hours >= 10` line. Also keep in mind that your current timezone is used. – Pieter De Clercq May 24 '17 at 09:00
Ohhh! Thanks a bunch. – MrLumbergh May 24 '17 at 09:48

score 0 · Answer 2 · edited May 24 '17 at 13:54

If you need the next day then increment the current date, then pass year, month, day and hours (static 10) to create the end date.

$(function() {
  var currentDate = new Date();
  var hours = currentDate.getHours();
  var day;
  
  if(hours >= 10){
      day = currentDate.getDate() + 1;
  } else {
      day = currentDate.getDate();
  }
  
  var endTime = new Date(currentDate.getFullYear(), currentDate.getMonth(), day, 10);  
  $("#countdown").countdown({until: endTime, format: 'HMS'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.plugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.min.css" />

<div id='countdown'></div>

score 0 · Answer 3 · answered May 24 '17 at 08:33

0

You can handle it this way.

currentDate.setHours(10,00,00);
if(hours >= 10){
    endTime = currentDate.AddDays(1);
}

answered May 24 '17 at 08:33

Mustafa ÜNÜGÜR

1
1

score 0 · Answer 4 · edited May 24 '17 at 13:52

This is the function I use for my website:

function countDown(id, date = "Jan 5 2018") {
  var int = setInterval(function() {
    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = date - now;

    // Time calculations for days, hours, minutes and seconds
    var days    = Math.floor( distance / (1000 * 60 * 60 * 24));
    var hours   = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Display the result in the element with id="demo"
    document.getElementById(id).innerHTML = days + "d " + hours + "h "
                                          + minutes + "m " + seconds + "s ";

    // If the count down is finished, write some text 
    if (distance < 0) {
      clearInterval(x);
      document.getElementById(id).innerHTML = "00d 00h 00m 00s";
    }
  }, 1000);

  return int;
}

In the date parameter, you need to enter your date and hour (ex. Jan 1, 2018 00:00:00) and in the id parameter the id selector (not '#myid' but only the name 'myid').

I hope this can be useful.

You can see it in action here

jQuery Countdown get time until 10:00 am today or tomorrow

4 Answers4