Code to allow user to enter own date and then count down the amount of time remaining till his set date

Question

I am trying to develop a website that will allow users to enter a date and then count down the number of days, hours,mins and seconds left till their chosen date.
I want users to enter their date using an html textbox if possible. I have a JavaScript variable const newYears =document.getElementById("initialDate"), and I am trying to get it to extract data entered in my HTML textbox id=initiatDate but it does not work when I do that. It just displays Nan values when I run it. When I give it a value.
Eg: const newYears ="30 Oct 2021" it works fine. The problem is that I want the input to come from the user and not from me the designer. Below is my code

 <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Countdown Timer</title>
        <link rel="stylesheet" href="style.css" />
        
        </head>
        <body>
            <br><br><br>
            <div class="countdown-container">
            <div class="countdown-el days-c">
                <p class="big-text" id="days">0</p>
                <span>days</span>
            </div>
            <div class="countdown-el hours-c">
            <p class="big-text" id="hours">0</p>
            <span>hours</span>
            </div>
            <div class="countdown-el mins-c">
            <p class="big-text" id="mins">0</p>
                <span>mins</span>
            </div>
            <div class="countdown-el seconds-c">
                <p class="big-text" id="seconds">0</p>
                <span>seconds</span>
            </div>
            
            <div>
            <label for="myDate" id="myDate" >
            <input type="date" name="myDate" id="initialDate">
            <button onclick="add()">Click to add date</button>
            </div>
            </div>
            <h1>...Until my Birthday</h1>
            </body>
            <script>
            function add(){
            var a=document.getElementById('initialDate').value
            alert("The value is "+a);
            }
            const daysEl = document.getElementById("days");
            const hoursEl = document.getElementById("hours");
            const minsEl = document.getElementById("mins");
            const secondsEl = document.getElementById("seconds");

            const newYears =document.getElementById("initialDate");

            function countdown() {
            const newYearsDate = new Date(newYears);
            const currentDate = new Date();

            const totalSeconds = (newYearsDate - currentDate) / 1000;

            const days = Math.floor(totalSeconds / 3600 / 24);
            const hours = Math.floor(totalSeconds / 3600) % 24;
            const mins = Math.floor(totalSeconds / 60) % 60;
            const seconds = Math.floor(totalSeconds) % 60;

            daysEl.innerHTML = days;
            hoursEl.innerHTML = formatTime(hours);
            minsEl.innerHTML = formatTime(mins);
            secondsEl.innerHTML = formatTime(seconds);
            }

            function formatTime(time) {
            return time < 10 ? `0${time}` : time;
            }

  
            countdown();

            setInterval(countdown, 1000);
            </script>

Does this answer your question? [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — Neea, Oct 31 '21 at 04:35

score 0 · Answer 1 · answered Oct 29 '21 at 17:57

You can try to subtract the today's time and the selected date time .

The getTime() method returns the number of milliseconds, now math's come into functionality here. Now the days, hours .... will be calculated through milliseconds.

const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("mins");
const secondsEl = document.getElementById("seconds");

document.getElementById("myDate").min =  new Date('2021-9-26');
function add() {
  var a = document.getElementById('initialDate').value
  alert("The value is " + a);
  countdown();
  setInterval(countdown, 1000);
}

function countdown() {
  let newDates = document.getElementById("initialDate").value;
  const newDate = new Date(newDates).getTime();
  const now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = newDate - 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);

  daysEl.innerHTML = days;
  hoursEl.innerHTML = hours;
  minsEl.innerHTML = minutes;
  secondsEl.innerHTML = seconds;
}

function formatTime(time) {
  return time < 10 ? `0${time}` : time;
}

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
   dd = '0' + dd;
}

if (mm < 10) {
   mm = '0' + mm;
} 
    
today = yyyy + '-' + mm + '-' + dd;
document.getElementById("initialDate").setAttribute("min", today);

<h3>...Until my Birthday</h3>
<span class="big-text" id="days">0</span>
<span>days</span>

<span class="big-text" id="hours">0</span>
<span>hours</span>

<span class="big-text" id="mins">0</span>
<span>mins</span>

<span class="big-text" id="seconds">0</span>
<span>seconds</span>
<br>

<label for="myDate" id="myDate">
 <input type="date" name="myDate" id="initialDate" min='1899-01-01'>
 <button onclick="add()">Click to add date</button>

Code to allow user to enter own date and then count down the amount of time remaining till his set date

1 Answers1