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

Answer 1

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();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/js/jquery.plugin.min.js" integrity="sha512-MPI2h+3IVJR8ElOGFV02uH6W1augIqS9y/YgTZH7xNb7QwLVPjFL0eRxbDpE6ZAk/hQbHm6zWXMh/oMR4/3sDA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/js/jquery.countdown.min.js" integrity="sha512-+Cdr05lT+aP+PTW4988XKLMjoAf0o5P2nRDIHooD/NItysfsyCPPhZhK/C6s7ZpaVoMRtsvRNJLtYOTDANC5UA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/css/jquery.countdown.min.css" integrity="sha512-3TZ6IiaoL7KEeLwJgOfw+/dEOxOUpb9YhmUokvcFOvNuFJ7t9kvilMNAMqeJ8neRT4iBnCe35TZsPwD2Y1Gl6g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="auction-counter"></div>