0

I'm trying to achieve a countdown timer, where the value it counts down from is populated from a Advanced Custom Field date time picker. Ideally I'd like to use http://countdownjs.org/ , or similar to power the timer.

I can simply output the time date value on the page template by calling the ACF field like so.

<p>Event starts: <?php the_field('featured_event_date','options'); ?></p>

However, in order to use a JS/jQuery countdown I need to be able to use to value from ACF inside JS, not PHP? Does this sound correct as a methodology so far? Something like the example below.

var countdown = new Countdown({
  selector: '#timer',
  msgBefore: 'Will start at Christmas!',
  msgAfter: 'Happy new year folks!',
  msgPattern:
    '{days} days, {hours} hours and {minutes} minutes before new year!',
  dateStart: new Date('2013/12/25 12:00'),
  dateEnd: new Date('Jan 1, 2014 12:00'),
  onStart: function() {
    console.log('Merry Christmas!')
  },
  onEnd: function() {
    console.log('Happy New Year!')
  }
})

It's pushing my knowledge out of the comfort zone, so advice, experience or examples or this would be much appreciated and help me on my way. Thanks in advance!

0 Answers0