Countdown shows NaN: NaN: NaN: NaN

Hello,

Retrieve the content of your PHP variable into a JS variable and then check what it contains before trying to use it in the rest of the JS code... (in other words, split line 3 of your JS into two... then use an IF in your function)

--
.
Best regards,
Jordane

Thank you for your response.
I'm not good at JS, I used an if statement and it's still displaying NaN: NaN: NaN: NaN plus 0000-00-00 00:00:00
Please could you fix the code for me, I would be grateful.

 <?php if(count($info) > 0){ ?> <?php echo $date = ($p->promo); // Parse the string based on the expected format $dtime = DateTime::createFromFormat("Y-m-d H:i:s", $date); // Output the date to match the required format $timestamp = $dtime->format('F j, Y H:i'); ?> <p class="countdown-timer" id="demo"></p> <?php }else { ?> <em> Nothing </em> <?php } ?> 

your response is too vague for me.
my level in php & js is really very modest, sir, that’s why I’m seeking help on the forums.
thank you for your attention.

Coté php :

 <?php $date = $p->promo; if ( !empty($date) && strtotime($date) != '0000-00-00') { // Parse the string based on the expected format $dtime = DateTime::createFromFormat("Y-m-d H:i:s", $date); // Output the date to match the required format $timestamp = $dtime->format('F j, Y H:i'); }else{ $timestamp = ""; } 

Coté JS :

 // Set the date we're counting down to var cdate = "<?php echo $timestamp; ?>"; if(cdate !=""){ var countDownDate = new Date(cdate).getTime(); // Update the count down every 1 second var x = setInterval(function(){ // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Output the result in an element with id="demo" document.getElementById("demo").innerHTML = days + ": " + hours + " : " + minutes + ": " + seconds + " "; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); } 

Of course, there are other ways to do it.
Check, for example, that your days variable is not NaN by using the function https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN

.
Best regards,
Jordane

Thank you for your response, I still haven't resolved the issue!!
When I retrieve an invalid date from my database, for example (0000-00-00 00:00:00), it always shows NaN: NaN: NaN: NaN. What I want is for nothing to be displayed when the date is (0000-00-00 00:00:00) :(

already tested it, it doesn't work!! when I retrieve an invalid date from my database e.g. (0000-00-00 00:00:00) it always displays NaN: NaN: NaN: NaN but when the date is valid it works!!!!

 $date = $p->promo; if ( !empty($date) && strtotime($date) != '0000-00-00 00:00:00') { // Parse the string based on the expected format $dtime = DateTime::createFromFormat("Y-m-d H:i:s", $date); // Output the date to match the required format $timestamp = $dtime->format('F j, Y H:i'); }else{ $timestamp = ""; } 

étonnant sur Firefox ça marche très bien, je viens de le découvrir, allons ouvrir la console, mais sur Google Chrome ça ne marche pas !!

I cleared the cache but it doesn't work.
In fact, the datetime-local attribute is rather new in the HTML5 specification, and implementation differs from one browser to another.
FireFox is more permissive for this particular scenario and displays the date correctly. Chrome follows the specification and does not recognize the "wrong" date format.

PROPOSED SOLUTION on another forum
The solution is to adhere to the W3C specification and to use the literal string "T" between the date and time parts. Like this

<input type="datetime-local" value="2018-02-25T19:24:23"/> 

I just need to find a method to format the date
on the forum they suggested the following code but I don't know where to place it in my code

 @DateTimeFormat(pattern = "yyyy-MM-dd'T'HH:mm:ss") private Date createdAt; 

This input is from the admin side of the website dashboard when I introduce a new article I must fill in my fields to save them in my database!
The promo input, if I leave it empty, automatically gives me 0000-00-00 00:00:00 in my database.
In my database, the promo field is of Type (datetime) I had to change it to varchar null to avoid getting 0000-00-00 00:00:00, but now the format of my date has changed in my database with a "T" between the date and time parts when I select a date???? and null if I do not select the promo date.
My question is how to format a date of type yyyy-MM-dd'T'HH:mm:ss
Thank you for your attention :)