Search code examples
jquerycountdowncountdowntimer

customize jquery countdown layout

Im stuck with the jquery countdown layout, I want to display something like this:

1 day, hours:minuts:sec

I could chieve it using the layout: option like this

layout: '{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}'

but now I got a problem, when the countdown is less than 24hrs it still shows the days like this

0 days, hours:minuts:sec

I need that when the countdown is less than 24hrs do not display the days

I know that can be done with a conditional but I do not know how to check it's less than 24hrs.

Thanks for your help

Solution

  • Supose you have you have several countdowns in the page, each countdown has the data attribute data-countdown-until so you can customize the countdowns with something like:

    $('div[data-countdown-until]').each (index, element) ->
      $element = $(element)
      date = new Date($element.data('countdown-until'))
      $element.countdown(until: date, description: '', onTick: highlightLast5, layout: '{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}')

    in this case it will show N days hh:mm:ss The above code works for whatever quantity of timers you have in the page.