Using jquery countdown timer with mysql datetime?

Question

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?

@MartyMcVry, not sure why but i thought i might as well try that as nothing was working! — EnergyLynx EnergyLynx
– EnergyLynx EnergyLynx, Commented Sep 18, 2013 at 16:09
@MartyMcVry, I have removed it. please view my edited question. — EnergyLynx EnergyLynx
– EnergyLynx EnergyLynx, Commented Sep 18, 2013 at 17:12
The countdown timer gets the right data... Is your computer set to the correct date? — Marty McVry
– Marty McVry, Commented Sep 18, 2013 at 17:26

Marty McVry · Accepted Answer · 2013-09-18 17:42:20Z

4

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

edited Sep 18, 2013 at 17:42

answered Sep 18, 2013 at 15:40

Marty McVry

3,0711 gold badge22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

EnergyLynx EnergyLynx Over a year ago

even with that formatting i still get 0 hours, 0 minutes, 0 seconds.

EnergyLynx EnergyLynx Over a year ago

wow, Bang on mate, so close but the hour is 1 hour behind. it should be 5 hours and it is showing 4 instead.

Marty McVry Over a year ago

I'm starting to think it's a timezone issue... If possible, let the SQL-query output the DateTime in your own timezone.

EnergyLynx EnergyLynx Over a year ago

I already have this on the top of the page: <?php date_default_timezone_set('GMT'); ?>

Marty McVry Over a year ago

Yeah, but PHP and the SQL database are two seperate things... I've had several issues myself regarding times/timezones in some of the applications I've made. - Don't know what timezone you're in, but I'd suggest: SELECT [...] CONVERT_TZ(end_date,'GMT','Europe/Brussels') AS end_date [...] or something along those lines. Europe/Brussels might not be the right timezone for you.

|

Collectives™ on Stack Overflow

Using jquery countdown timer with mysql datetime?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related