Countdown to start datetime, then countdown to stop datetime (jQuery)

Question

How do I countdown to a start time and then countdown to a stop time, using this countdown library?

The documentation says I should add a parameter onExpiry to run a callback function but no matter how I structure these functions, it either starts counting down to stopdate even when startdate is still in the future or it stops at 00:00:00:00 and does nothing on the expiry of startdate.

What I need it to do is countdown to startdate and when done, countdown to stopdate

function startTimers() {
  $(function() {
    $('#auction-counter').countdown({
      until: startdate,
      onExpiry: stopTimer,
      format: 'DHMS',
      padZeroes: true,
      alwaysExpire: true
    });

    function stopTimer() {
      $('#auction-counter').countdown({
        until: stopdate,
        format: 'DHMS',
        padZeroes: true,
        alwaysExpire: true
      });
    }
  });
}

The code above does countdown to startdate but then stops at 00:00:00:00

user_519413 · Answer

Your code is close to working. The issue you have is that the original countdown instance needs to be removed from the #auction-counter element. This can be done using the destroy setting of the countdown plugin.

From there you can re-initialise the second countdown using stopdate, like this:

// date setup
let now = new Date();
let startdate = new Date(now.setSeconds(now.getSeconds() + 5));
let stopdate = new Date(now.setSeconds(now.getSeconds() + 5));
let $counter = $('#auction-counter');

function firstTimer() {
  $counter.countdown({
    until: startdate,
    onExpiry: secondTimer,
    format: 'DHMS',
    padZeroes: true,
    alwaysExpire: true
  });
}

function secondTimer() {
  $counter.countdown('destroy'); // destroy original countdown instance
  
  console.log('starting second countdown');  
  $counter.countdown({
    until: stopdate,
    onExpiry: () => console.log('both timers complete!'),
    format: 'DHMS',
    padZeroes: true,
    alwaysExpire: true
  });
}

firstTimer();

Countdown to start datetime, then countdown to stop datetime (jQuery)

1 Answers