13

I am using http://flipclockjs.com/

This is my call script so far,

<script type="text/javascript">
var clock = $('.clock').FlipClock(3600 * 24 * 5, {
    clockFace: 'DailyCounter',
    countdown: true,
});
</script>

Please could someone tell me how i can count down from an exact date?

So for example the date is 21st July, 2014 in UK time, and everyone that visits that site will see how long there is remaining till that date based on the current date.

abhi
  • 1,760
  • 1
  • 24
  • 40
Third_Hyperion
  • 467
  • 2
  • 6
  • 14

6 Answers6

20

This is what I use 

<div class="clock"></div>
<script type="text/javascript">
    var date = new Date(2015, 6, 21);
    var now = new Date();
    var diff = (date.getTime()/1000) - (now.getTime()/1000);

    var clock = $('.clock').FlipClock(diff,{
        clockFace: 'DailyCounter',
        countdown: true
    });  
</script>

Months is zero-based, so July, being the seventh month, uses 6.

Matt Miller
  • 318
  • 1
  • 4
  • 12
7

@Matt, Great example, however I can see why "coolshrimp" posted a similar formula, both are half correct.

In my website, when i use jsfiddle, I want it to also show "Hours" "Minutes" and "Seconds", the following example worked perfectly for me:

    <script type="text/javascript">
        var date = new Date("February 01, 2016 02:15:00"); //Month Days, Year HH:MM:SS
        var now = new Date();
        var diff = (date.getTime()/1000) - (now.getTime()/1000);

        var clock = $('.clock').FlipClock(diff,{
            clockFace: 'DailyCounter',
            countdown: true
        });
    </script>
Burgo855
  • 248
  • 1
  • 5
  • 19
4

Simple:

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.clock').FlipClock(new Date("August 15, 2015 03:24:00"),{
    clockFace: 'DailyCounter',
    countdown: true
    });  
</script>

OR

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.clock').FlipClock(new Date(2015,8,15),{
    clockFace: 'DailyCounter',
   countdown: true
   });  
</script>
coolshrimp
  • 101
  • 5
  • Why is this being downvoted? Best and most correct answer in here. No need for calculating some difference beforehand. – maryisdead Sep 09 '15 at 11:48
  • This answer is straightforward. Flipclock already calculated the difference in its functions by setting countdown: true – Nick Dec 22 '15 at 03:06
  • First, I thought this one would be the most beautiful way to do, but then I realize the counting down run faster then it should be, double faster, each second it jump down 2 in stead of 1. So I came back to the calculation diff way just as in the examples Flipclock give us at Github. – Chinh Phan Jul 21 '16 at 08:32
2

You would have to do it someway like this: 

$(document).ready(function(){
    var date = new Date(2014, 7, 21, 0,0,0,0);
    var today = new Date();

    var dif = date.getTime() - today.getTime();

    var timeLeft = Math.abs(dif/1000)/60;


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

    clock.setTime(timeLeft);
    clock.start();   
});

The time function is a little bit off, so you'll have to play around with it to get it right.

Fiddle: http://jsfiddle.net/Uscg9/4/

Adjit
  • 10,134
  • 12
  • 53
  • 98
  • @Wes not a problem. If it works for you can you mark it as correct? thanks. – Adjit Jul 17 '14 at 15:01
  • Hi Sorry, This doesnt work =( for example if you go to your js fiddle and change your date to 25th of july which is technically tomorrow, you would expect to see one day? but you dont, you see 31 days. Please help. Cheers, – Third_Hyperion Jul 24 '14 at 11:37
  • @Wes I had said my time function was off. Just need to divide `timeLeft` by `60` `var timeLeft = Math.abs(dif/1000)/60;` – Adjit Jul 24 '14 at 13:23
1

I think using the api function of Date will be better (reference)

$(document).ready(function() {
    // Today's date object.
    var today   = new Date();
    today   = today.getTime()/1000;

    // Final date object.
    var finalDate = new Date();

    // Setting year for final date.
    finalDate.setFullYear(2016);

    // Setting month for final date.
    // Month counting starts from 0 i.e. Jan = 0, therefore March = 2.
    finalDate.setMonth(2);

    // Setting Day for final date.
    finalDate.setDate(17);

    // Setting Hours for final date.
    finalDate.setHours(12);

    // Setting Minutes for final date.
    finalDate.setMinutes(00);

    // Setting Seconds for final date.
    finalDate.setSeconds(00);

    var finalDate  = finalDate.getTime()/1000;
    var diff  = finalDate - today;

    $('div#countdown-clock').FlipClock(diff, {
        clockFace: 'HourlyCounter',
        countdown: true
    }); 
});
Martin Schneider
  • 3,268
  • 4
  • 19
  • 29
garlicFrancium
  • 2,013
  • 14
  • 23
0

You need to calculate the diff yourself. See the example for counting down to new year: https://github.com/objectivehtml/FlipClock/blob/master/examples/countdown-from-new-years.html

$(document).ready(function() {
    // Grab the current date
    var currentDate = new Date();
    // Set some date in the past. In this case, it's always been since Jan 1
    var pastDate  = new Date(currentDate.getFullYear(), 0, 1);
    // Calculate the difference in seconds between the future and current date
    var diff = currentDate.getTime() / 1000 - pastDate.getTime() / 1000;
    // Instantiate a coutdown FlipClock
    clock = $('.clock').FlipClock(diff, {
        clockFace: 'DailyCounter'
    });
);
Simon Riley
  • 1