convert days hours minutes seconds to iso 8601 - javascript

here is my script
var specialDate = "<?php echo trim(date('Y-m-d\TH:i:s',strtotime($time[1])));?>";
var countDownDate = new Date(specialDate).getTime();
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
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);
var countdown = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
the above code is working perfectly fine on all the browsers except for safari.
after googling I came to know I need to convert this to iso 8601 compliant to work for safari (currently it is showing nand nanh nanm nans error on safari browser iphone 6 )
I is the detail of of my phone
EDIT:
here is page source

try changing the following:
var specialDate = "<?php echo trim(date('Y-m-d\TH:i:s',strtotime($time[1])));?>";
var countDownDate = new Date(specialDate).getTime();
To:
// echo php timestamp
var specialDate = <?php echo strtotime($time[1]);?>;
// multiply by 1000 for equivalent of `Date.getTime()`
var countDownDate = specialDate * 1000;

Related

How do I display the date/time for Australia in PHP?

I have this countdown timer that I'm trying to make, but I need to current the current time/date in Australia.
"Clearance Date" is the date I'd like to count down to.
At the moment I'm getting 10d 7h 0m 8s but I believe it should be 9d 21hr
<?php
$clearance_date = 'August 20, 2022 09:00:00';
?>
<p id="demo"></p>
<script>
// Set the date we're counting down to
// 1. JavaScript
// var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
// 2. PHP
var countDownDate = <?php echo strtotime($clearance_date) ?> * 1000;
var now = <?php echo time() ?> * 1000;
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
now = now + 1000;
// Find the distance between now an 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 + "d " + hours + "h " +
minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
Using PHP to set the date uses the server time. Whereas using now in javascript get the client time.
I would pass the duration (hours left) from PHP to set the javascript variable. And then count that down and add to current date.

JS countdown multiple times on page (won't display with getElementsByClassName)

I took some JS code from w3 to create a countdown. (https://www.w3schools.com/howto/howto_js_countdown.asp)
Because I want to display the countdown multiple times on one page I changed the getElementById("demo") to > getElementsByClassName("demo")
Unfortunately, this doesn't work. Nothing shows up. Why is that and how can I display the same counter multiple times? I tried some things but nothing worked out. This is my code:
html
<p class="demo"></p>
js
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2022 15:37:25").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.getElementsByClassName("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementsByClassName("demo").innerHTML = "EXPIRED";
}
}, 1000);
As #ShanieMoonlight mentioned you need to iterate over the HTMLCollection. You can easily do it with minimal adjustments. E.g. when you use the spread-operator the forEach-function will be available.
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2022 15:37:25").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.getElementsByClassName("demo")].forEach(e => e.innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ");
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
[...document.getElementsByClassName("demo")].forEach(e=>e.innerHTML = "EXPIRED");
}
}, 1000);
<p class="demo"></p>
<p class="demo"></p>
<p class="demo"></p>

Custom field calculation in wordpress using Javascript

I have implemented the code below in my site, to display a running timer. The site is running on Wordpress. At the moment the date is input in the code (so it applied site wide). I am looking to have a running timer on each post.
I need to change the code below so that I can use a custom field on each post called "expiry" as the date, instead of the hardwired date below (newDate("Jan 5, 2021 15:37:25).getTime()
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").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);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
The above code is sourced from here
My site is here
Thanks in advance
below steps is your requirements:
1) in custom field expiry set return format as custom "F j, Y g:i:s"
example link (https://prnt.sc/pqg79l)
2) add this function in functions.php
function functionname() {
global $post;
$field= get_field('expiry_date', $post->ID);
echo '<input type="hidden" id="date" value="'.$field.'">';
}
add_action( 'template_redirect', 'functionname' );
3) in your js file add below script
var $= jQuery;
var d = $("#date").val();
console.log(d);
// Set the date we're counting down to
var countDownDate = new Date(d).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);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
make sure you have to add <p id="demo"></p> where you want to show in post
I have tried this code..It's totally working fine..I hope i have helped you by this

use woocommerce get_date_on_sale_to() in javascript countdown timer

I have a problem with use woocommerce get_date_on_sale_to() in javascript countdown timer. My code is:
<script>
var countDownDate = new Date(<?php echo $product->get_date_on_sale_to(); ?>).getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
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);
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
i think this line is invalid :
var countDownDate = new Date(<?php echo $product->get_date_on_sale_to(); ?>).getTime();
output of this code <?php echo $product->get_date_on_sale_to(); ?> is "2018-01-25T00:00:00-01:00"
but my coutdown timer display : NaN d NaN h NaN m NaN s
how to fix it??????
You first need to exctract Date from string, like:
//You'll get date in milliseconds since 1970/01/01, so don't need to use getTime()
var countDownDate = Date.parse(<?php echo $product->get_date_on_sale_to(); ?>);
More about Date.parse can find here.
Also, here var distance = countDownDate - now; you getting negative number, try so:
var distance = now - countDownDate;

Javascript timer in the background

I have a working count up timer but it resets everytime I change the page, for example index.php -> help.php -> index.php(and here the timer starts again from 0 instead of counting in the background)
The code is here:
<h1 id="demo"></h1>
countDownDate = new Date(); localStorage.setItem('startDate', countDownDate);
var countDownDate = localStorage.getItem('startDate');
if (countDownDate) {
countDownDate = new Date(countDownDate);
} else {
countDownDate = new Date();
localStorage.setItem('startDate', countDownDate);
}
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = now - countDownDate.getTime();
// 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 + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}, 1000);

Categories

Resources