Please, how do I make HTML form button disable when countdown date expires, I was able to create a count-down date, but I don't really know how to disable the button once the count-down displays "expired".
// The output of the count-down date
<div class="value text-danger" id="demo"></div>
//html form button
<form>
<input type="text" placeholder="your full name">
<button>Join</button>
</form>
// count down JavaScript
<script>
// Set the date we're counting down to
var countDownDate = new Date("Nov 22, 2022 11:34:38") .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 + " days remaining" ;
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
give ID to the button and use this
document.getElementById(BUTTON_ID).disabled = true;
use this code:
<div class="value text-danger" id="demo"></div>
//html form button
<form>
<input type="text" placeholder="your full name">
<button id="button">Join</button>
</form>
// count down JavaScript
<script>
// Set the date we're counting down to
var countDownDate = new Date("Oct 22, 2022 11:34:38") .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 + " days remaining" ;
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
document.getElementById("button").disabled = true;
}
}, 1000);
</script>
You need to set the disabled attribute to "true". Can you try with the example below?
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
document.querySelector('#button').disabled = true;
}
https://www.w3schools.com/tags/att_button_disabled.asp
You can add a line in Jquery or Javascript whatever you want:
// in JQuery
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
$("#button").attr("disabled", true);
}
// in JS
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
document.getElementById(BUTTON_ID).disabled = true;
}
set the button's disabled attribute to true.
<!-- // The output of the count-down date -->
<div class="value text-danger" id="demo"></div>
<!-- //html form button -->
<form>
<input s type="text" placeholder="your full name">
<button id="btn">Join</button>
</form>
<!-- // count down JavaScript -->
<script>
// Set the date we're counting down to
var countDownDate = new Date("Oct 24, 2022 11:34:38") .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 + " days remaining" ;
let btn = document.getElementById("btn");
// If the count down is over, write some text
if (distance <= 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
btn.disabled = true;
}
}, 1000);
</script>
Related
I'm trying to build a memento mori kind of clock, and I want to make it so people can insert a certain date in there.
But when I get the element by ID in JS I get null.
Tried to get make it a string and test it with alerts, but I got no results. It was still null.
I mean, the alert box is empty, so I assume it is null.
Some of my assumptions are:
There's a problem with the id or with the document.getElementById("targetDate").innerHTM part
I tried to get it as a string and then convert it to date as I did initially using this: new Date("Jan 5, 2090 15:37:25").getTime()
I don't use the date functions the right way
Maybe the approach should be changed to getting the day, month, year & hours separately
Here's the code:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>💀 Days Until Death</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="main-div">
<h2>💀 Days Until Death</h2>
<hr>
<h1><p id="demo"></p></h1>
<hr>
<input id="targetDate" type="input" name="date" value="Jan 1, 2090 15:37:25">
<input onclick="ChangeDate()" type="submit" name="" value="Change Date">
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
JavaScript:
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2090 15:37:25").getTime();
function ChangeDate() {
var targetDate = String(document.getElementById("targetDate").innerHTML);
alert(targetDate);
countDownDate = new Date(targetDate).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);
You need to change innerHTML for value
Also don't need to convert it to String, and avoid using html inline event listeners
// Set the date we're counting down to
let countDownDate = new Date("Jan 5, 2090 15:37:25").getTime();
const demo = document.getElementById('demo');
const changeDateInput = document.getElementById('changeDateInput');
function ChangeDate() {
const targetDate = document.getElementById('targetDate').value;
console.log(targetDate);
countDownDate = new Date(targetDate).getTime();
}
changeDateInput.addEventListener('click', ChangeDate)
// Update the count down every 1 second
const x = setInterval(() => {
// Get today's date and time
const now = new Date().getTime();
// Find the distance between now and the count down date
const distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
demo.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s `;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
demo.innerHTML = "EXPIRED";
}
}, 1000);
<div class="main-div">
<h2>💀 Days Until Death</h2>
<hr>
<h1>
<p id="demo"></p>
</h1>
<hr>
<input id="targetDate" type="input" name="date" value="Jan 1, 2090 15:37:25">
<input id="changeDateInput" type="submit" name="" value="Change Date">
</div>
I just replaced innerHTML to value
var targetDate = String(document.getElementById("targetDate").value);
And now I can get the date from the alert that you coded. Here's a screenshot:
Try using document.querySelector instead, or you can also just get the method value instead of the innerHTML.
Also take a look on good practices with javascript by not using var for let and const.
https://hackernoon.com/why-you-shouldnt-use-var-anymore-f109a58b9b70
https://www.geeksforgeeks.org/what-is-the-disadvantage-of-using-innerhtml-in-javascript/
let countDownDate = new Date("Jan 5, 2090 15:37:25").getTime();
function ChangeDate() {
const newTargetData = document.querySelector("#targetDate").value;
alert(newTargetData);
countDownDate = new Date(newTargetData).getTime();
}
// Update the count down every 1 second
const x = setInterval(function() {
// Find the distance between now and the count down date
const distance = countDownDate - Date.now();
// Time calculations for days, hours, minutes and seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const 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);
Good hacking for you buddy!
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
I am making a countdown timer where the text for Days Hours Minutes Seconds is just below to their respective values. Also it must be responsive too. I have some code below:
// 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 todays 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("timer").innerHTML = "<h1>" + days + " <span> days </span>: " + hours + " <span>hours</span>: " + minutes + " <span>minutes </span>: <font color='red'>" + seconds + "<span> s</span></font> </h1>";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
<div align="center" id="timer"></div>
My code has a problem in the case that the day symbol D is on left of the Day value but I want it to be on right. I mean just like picture below
You can wrap the text in <div> to create a line break. Secondly create a function which takes text,value and color as parameter and return html string.
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();
function timePart(val,text,color="black"){
return `<h1 class="timer" style="color:${color};">${val}<div>${text}</div></h1>`
}
// 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 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"
let res = timePart(days,'days') + timePart(hours,'hours') + timePart(minutes,'Mins') + timePart(seconds,'Seconds','red');
document.getElementById("timer").innerHTML = res
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
.timer{
display:inline-block;
padding:10px;
}
<div align="center" id="timer"></div>
Okay so I fixed it according to your requirements. It's not exactly like the picture but I'm sure you can do a little bit of styling. Here is the snippet in action.
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();
// 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 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("dd").innerHTML = days
document.getElementById("hh").innerHTML = hours
document.getElementById("mm").innerHTML = minutes
document.getElementById("ss").innerHTML = seconds
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
h1 span {
margin: 0px 10px;
}
p span {
margin: 0px 11px;
}
<div align="center">
<h1>
<span id="dd"></span>:
<span id="hh"></span>:
<span id="mm"></span>:
<span style="color:red;" id="ss"></span>
</h1>
<p>
<span>Days</span>
<span>Hours</span>
<span>Minutes</span>
<span>Seconds</span>
</p>
</div>
In the following code I want to make a text input field (for a date) which gets executed so that the countdown timer is set to that value and starts counting - for example after clicking "OK" button. I don't really know how to modify the first variable in order to do that.
<script>
// Set the date we're counting down to
var countDownDate = new Date("May 25, 2018 11:30:00").getTime();
// 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 = 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 = "Pozostało: </br>" + days + " Dni, </br>" + hours + "g : " + minutes + "m : " + seconds + "s";
document.getElementById("demo").style.fontSize = "45px";
document.getElementById("demo").style.fontWeight = "bold";
document.getElementById("demo").style.color = "white";
document.getElementById("demo").style.backgroundColor = "#4783bf";
document.getElementById("demo").style.textAlign ="center";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
Thank you for all the advice!
Have a look at this fiddle start timer on click of button
I have entered this date in textbox :- May 26, 2017 01:30:00
function startTimer(){
var dateEntered = document.getElementById("txtDate").value;
// Set the date we're counting down to
//May 26, 2017 01:30:00
var countDownDate = new Date(dateEntered).getTime();
// 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 = 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 = "Pozostało: </br>" + days + " Dni, </br>" + hours + "g : " + minutes + "m : " + seconds + "s";
document.getElementById("demo").style.fontSize = "45px";
document.getElementById("demo").style.fontWeight = "bold";
document.getElementById("demo").style.color = "white";
document.getElementById("demo").style.backgroundColor = "#4783bf";
document.getElementById("demo").style.textAlign ="center";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
}
<input type="text" id="txtDate"/>
<br>
<input type="button" value="Calculate" onclick="startTimer();">
<div id="demo">
</div>
The first, you need to download datetimepicker library.
https://plugins.jquery.com/datetimepicker/
And then, following this. Remember to change the path of css and jquery files.
<link href="~/css/jquery.datetimepicker.css" rel="stylesheet" />
<body>
<input type="text" id="datetimepicker" />
<input type="button" value="Ok" id="btOk" />
<p id="demo" />
</body>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/jquery.datetimepicker.min.js"></script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker();
$(document).ready(function () {
$('#btOk').click(function () {
var currentDate = $('#datetimepicker').val();
var countDownDate = new Date(currentDate).getTime();
// 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 = 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 = "Pozostało: </br>" + days + " Dni, </br>" + hours + "g : " + minutes + "m : " + seconds + "s";
document.getElementById("demo").style.fontSize = "45px";
document.getElementById("demo").style.fontWeight = "bold";
document.getElementById("demo").style.color = "white";
document.getElementById("demo").style.backgroundColor = "#4783bf";
document.getElementById("demo").style.textAlign = "center";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
});
});
</script>
I have a Javascript code for a countdown timer. I want to use this code in a online shop order process. However I don't want to edit the date every day manually.
Now my question is: How can i display the div container from 6am to 2am (06.00 to 14.00).
From 14.00 to 06.00 i want that this container is display:none
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2018 18:00:00").getTime();
// 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 = 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("timer").innerHTML = "Bestellen Sie innerhalb der nächsten <span style='font-size:18px;color: #008a00!important;'>" + hours + " Stunden und "
+ minutes + " Minuten " + "</span>und wir versenden noch am gleichen Tag!";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
var d = new Date();
if(d.getHours() >= 7 && d.getHours() <= 18 ){
$("#timer").show();
$(".closed").hide();
} else {
$(".closed").show();
$("#timer").hide();
}
<!-- Display the countdown timer in an element -->
<p id="timer"></p>
<p class="closed"></p>
Have anyone a solution for that?
// Edit the post with new HTML/JS Data