CODEWITHSUNDEEP
phpjquerymysql
EnergyLynx EnergyLynx
EnergyLynx EnergyLynx

Reputation: 115

Using jquery countdown timer with mysql datetime?

I know this question has been asked many times as I have found a few on google and also on stackoverflow.

but none of them explained how to format my datetime in my php so it works in combination with jquery countdown timer. so I am going to ask it here in a hope i get someone shed a light on this for me.

Basically what i am trying to do is to create a countdown timer which will work with mysql datetime.

the datetime is stored in mysql so All need to do is to get the correct format in my php so the countdown timer could work with it.

I am using this plugin: http://keith-wood.name/countdown.html

and here is what i have so far:

PHP formatting:

$end_date = date("m d Y H:i:s T", strtotime($row["end_date"]));

Jquery/Javascript code:

<script type="text/javascript">

$(function(){
    var countdown = $('#countdown'),
        ts = new Date(<?php echo $end_date * 1000; ?>),
        finished = true;

    if((new Date()) > ts)
    {
        finished = false;
    }

    $('#defaultCountdown').countdown({
        timestamp   : ts,
        callback    : function(days, hours, minutes, seconds)
        {
            var message = "";

            message += days + " days, ";
            message += hours + " hours, ";
            message += minutes + " minutes, ";
            message += seconds + " seconds ";

            message = (finished ? "Countdown finished" : "left untill the New Year");

            countdown.html(message);
        }
    });

});

</script>

when i run this code, all i get is 0 hours, 0 minutes, 0 seconds.

I can only suspect that the issue is from formatting the datetime in my php section!

or am i missing something else as well?

okay I have managed to minify the code to this:

<script type="text/javascript">

 $(document).ready(function () {
    $('#defaultCountdown').countdown({
        until: new Date(<?php echo $end_date; ?>),
        compact: true
    });
});

</script>

and changed the php to this:

$end_date = date("Y, n, j, G, i, s", strtotime($row["end_date"]));

However, the time shown in the coutdown timer is wrong (way off).

the $end_date is: September 22 2013 23:30:00 GMT in mysql datetime

but the jquery countdown timer is showing:

34d 06:21:48
2013, 9, 22, 23, 30, 00

34days and 6 hours blah blah is absolutely wrong!

what am i doing wrong here now?

Upvotes: 0

Views: 5499

Answers (1)

Marty McVry
Marty McVry

Reputation: 2856

The JavaScript Date object is constructed as follows:

Date(year, month, day, hours, minutes, seconds, milliseconds)

That means you probably should be doing something along these lines:

$end_date = date("Y, n, j, G, i, s", strtotime($row["end_date"]));

Sources:

EDIT:

In addition, I seem to have found the problem in the jQuery Countdown manual:

A note on Date - the JavaScript Date constructor expects the year, month, and day as parameters. However, the month ranges from 0 to 11. To make explicit what date is intended (does a month of 3 mean March or April?) I specify the month from 1 to 12 and manually subtract the 1. Thus the following denotes 25 December, 2010.

So, you'd have to split the string, substract 1 from the month and rebuild...

$tmp_date = explode(', ', $end_date);
$tmp_date[1] = $tmp_date[1] - 1;
$end_date = implode(', ', $tmp_date);

Link to jsFiddle

Upvotes: 4

Related Questions