Countdown from specific date from mysql

Question

Well this is probably easy for you guys but i seriously cant make it work.

So What i would like to do is make a countdown based on the date from mysql and make it going down in live mode whithout the need to refresh.

Code:

<?php 
$date = strtotime($row_tournaments['date']);
$remaining = $date - time();
$days_remaining = floor($remaining / 86400);
$hours_remaining = floor(($remaining % 86400) / 3600);
$minutes_remaining = floor(($remaining % 3600) / 60);
$seconds_remaining = ($remaining % 60);
echo "<p>$days_remaining <span style='font-size:.3em;'>dias</span> $hours_remaining <span style='font-size:.3em;'>horas</span> $minutes_remaining <span style='font-size:.3em;'>minutos</span> $seconds_remaining <span style='font-size:.3em;'>segundos</span></p>";
?>

This works fine but i need to refresh so i can see the time going down.

So i find this answer,

Code:

<p id="counter"></p>

<script>
var counter = new Date(2015,10,10,20,25,30);
var counterElem = document.getElementById("counter");
setInterval(function()
{
counter.setSeconds(counter.getSeconds() - 1);
counterElem.innerHTML = counter.getDate()+" <span style=\'font-size:.3em;\'>dias</span> "+counter.getHours()+" <span style=\'font-size:.3em;\'>horas</span> "+counter.getMinutes()+" <span style=\'font-size:.3em;\'>minutos</span> "+counter.getSeconds()+" <span style=\'font-size:.3em;\'>segundos</span>";
},1000);
</script>

that actually works pretty fine but the problem is that the

new Date(2015,10,10,20,25,30)

only accepts this format and in my database the format of the date is

2015-10-06 06:17:18

And i dont how to convert.

Please help, if you guys have a better solution is well welcome.

Thanks for your time.

Cumps.

All the code:

<div id="countdownContainer">
<a href="tournaments.php?id_tournament=<?php echo $row_tournaments['id_tournament']; ?>"><img src="images/wallpapers/<?php echo $row_tournaments['logo']; ?>.jpg"></a>
<div id="countdownContent">
<p>Próximo Torneio:</p>
<?php 
$date = strtotime($row_tournaments['date']);
$remaining = $date - time();
$days_remaining = floor($remaining / 86400);
$hours_remaining = floor(($remaining % 86400) / 3600);
$minutes_remaining = floor(($remaining % 3600) / 60);
$seconds_remaining = ($remaining % 60);
echo "<p>$days_remaining <span style='font-size:.3em;'>dias</span> $hours_remaining <span style='font-size:.3em;'>horas</span> $minutes_remaining <span style='font-size:.3em;'>minutos</span> $seconds_remaining <span style='font-size:.3em;'>segundos</span></p>";
?>


<p id="counter"></p>
<script>
str = "$row_tournaments['date']"; // Your db format  var date = new Date(Date.parse(str));
str = str.replace(/-/g,"/");
var counter = new Date(Date.parse(str));
var counterElem = document.getElementById("counter");
setInterval(function()
{
counter.setSeconds(counter.getSeconds() - 1);
counterElem.innerHTML = counter.getDate()+" <span style=\'font-size:.3em;\'>dias</span> "+counter.getHours()+" <span style=\'font-size:.3em;\'>horas</span> "+counter.getMinutes()+" <span style=\'font-size:.3em;\'>minutos</span> "+counter.getSeconds()+" <span style=\'font-size:.3em;\'>segundos</span>";
},1000);
</script>

</div>
</div>

Answer 1

You can do like this

var str = "2015-10-06 06:17:18";  // Your db format
str = str.replace(/-/g,"/"); 
var date = new Date(Date.parse(str));

Here in second line I am replacing delimiter - with / . This is because Date.parse() Expects delimiter as /