Changing 'new Date' to input value

Question

I'm new to coding so please go easy on me..

I'm creating base apps so I can get some experience with JavaScript, one of them is a countdown timer involving an input that you input a date/time into and the idea is to initiate a countdown from getTime - inputTime.

I've tried implementing a 'change' event listener to change the textContent.

var timeInput = document.getElementById("timeInput");
var timeCounter = document.getElementById("timeCounter");
var deadline = new Date('dec 31, 2020 15:37:25').getTime();
// var deadline = document.getElementsById("timeInput").getTime();

var x = setInterval(function() {
  var now = new Date().getTime();
  var t = deadline - now;
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((t % (1000 * 60)) / 1000);

  document.getElementById("timeCounter").innerHTML = days + "d " +
    hours + "h " + minutes + "m " + seconds + "s ";
  if (t < 0) {
    clearInterval(x);
    document.getElementById("timeCounter").innerHTML = "EXPIRED" + " Enter a new date.";
  }
}, 1000);

timeInput.addEventListener("change", function() {
  timeCounter.textContent = t.textContent;
})

The page counts down from 428days regardless of changing the date input.

Sarah Groß · Accepted Answer · 2021-07-19 09:30:42Z

1

In your change handler, set deadline to the getTime() value of a new DateTime object based on the timeInput value:

(e.g. paste 2019-12-31 18:00:00 into the input and remove the focus from it, and the countdown should start at 57 days)

var timeInput = document.getElementById("timeInput");
var timeCounter = document.getElementById("timeCounter");
var deadline = new Date('dec 31, ' + (new Date().getFullYear()) + ' 23:59:59').getTime();
// var deadline = document.getElementsById("timeInput").getTime();

var x = setInterval(function() {

  var now = new Date().getTime();
  var t = deadline - now;
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((t % (1000 * 60)) / 1000);
  timeCounter.innerHTML = days + "d " +
    hours + "h " + minutes + "m " + seconds + "s ";
  if (t < 0) {
    clearInterval(x);
    timeCounter.innerHTML = "EXPIRED" + "Enter a new date.";
  }
}, 1000);

timeInput.addEventListener("change", function() {
  deadline = new Date(timeInput.value).getTime();
})

<input type="text" id="timeInput" />
<div id="timeCounter"></div>

The issue with your code was that deadline was never updated, and also the variable t is a local variable, only available in the callback function you passed to setInterval.

You can further do some optimization. As you already have the timeCounter reference, you don't have to use document.getElementById("timeCounter") om your callback function, just use the reference instead.

edited Jul 19, 2021 at 9:30

answered Nov 4, 2019 at 15:19

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

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

5 Comments

RobG Over a year ago

re new Date(timeInput.value), see Why does Date.parse give incorrect results?

Sarah Groß Over a year ago

Good point! This might also help: stackoverflow.com/questions/23641525/… Using a library like momentjs might also be an alternative to handling date/time related issues.

RobG Over a year ago

Moment (or any parser) can only reliably parse a string if the format is known. If the format is known, then a simple parser is only a few lines of code. So importing a large library simply to parse a single format is somewhat extravagant.

Shankar S Bavan Over a year ago

How we can set the timezone?

Sarah Groß Over a year ago

@ShankarSBavan You can add a specific time zone like this: 2021-07-31 18:00:00 +02:00

Collectives™ on Stack Overflow

Changing 'new Date' to input value

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related