Missing example for setting time

[sjelfull]

Hiya, there is no example in the documentation showing how to actually set which date/time you want to count down to.

[underbyte]

Here's a basic count down example:

var clock = $('.clock').FlipClock({
    countdown: true
});

var start = new Date();
var end = new Date();
//add 10 seconds to the starting time 
start.setSeconds(end.getSeconds() + 10);

//calculate the difference
var duration = start.getSeconds() - end.getSeconds();

//set the clock duration
clock.setTime(duration);
clock.start();

It get tricky when you have to deal with timezone but this is basic as it get.

[jrdn91]

How can I specify a certain date to countdown to? I'm just a little confused on how to use this plugin.

[imikay]

There are two ways to do this:

  // Caculate the time diff in seconds
  // It's up to you to choose a appropriate method to do this
  var timeDiffInSeconds = aFutureTime - now;

  $('.countdown').FlipClock(timeDiffInSeconds, {
    countdown: true
   } ) ;

another way to do this is:

  // Caculate the time diff in seconds
  // It's up to you to choose a appropriate method to do this
  var timeDiffInSeconds = aFutureTime - now;

  var countdown = $('.countdown').FlipClock({
    autoStart: false,
    countdown: true   
  } ) ;

 countdown.setTime(timeDiffInSeconds);
 countdown.start();

The difference is when to set the time diff, if you choose to use the latter method, you must remember to turn off autoStart at initialization time, and manually start it later, otherwise it won't work.

[zoblue]

I found an answer to this question here: http://stackoverflow.com/questions/18434166/javascript-countdown-for-specific-time-and-date

// countdown to 9/30/13; month starts at 0
var date  = new Date(Date.UTC(2013, 8, 30, 12, 0, 0));
var now   = new Date();
var diff  = date.getTime()/1000 - now.getTime()/1000;
var clock = $('.clock').FlipClock(diff, { 
    clockFace: 'DailyCounter',
    countdown: true
});

[bjonesy]

These examples are not very good. Still trying to figure out how to set the Flip Clock to show days, hours, mins, seconds since a date while counting up. Documentation does not go into enough to detail on how to use everything.

[objectivehtml]

@JonesCreativeConcepts It's pretty simple. I just tested this. The example below is a clock counting up from Nov 1.

var date  = new Date(2013, 10, 01);
var now   = new Date();
var diff  = now.getTime()/1000 - date.getTime()/1000;

clock = $('.clock').FlipClock(diff, {
    clockFace: 'DailyCounter',
    countdown: false
});