How to add Timer on Html page using Javascript

Question

I need to timer on my html page with using javascript. But I have <input type="date" /> and timer get the selected date time and control it. If the differences between current time and selected time close in for instance last 1 day. Timer show alert message. How can I do this? I need to compare current time and selected time. Thanks for all response.

function add() {
  var num = document.getElementById("t1").rows.length;
  console.log(num);
  var x = document.createElement("tr");

  var a = document.createElement("td");
  var anode = document.createTextNode(num + '.');
  a.appendChild(anode);
  x.appendChild(a);

  a = document.createElement("td");
  anode = document.createElement("input");
  var b = document.createAttribute("type");
  b.value = "checkbox";
  anode.setAttributeNode(b);
  a.appendChild(anode);
  x.appendChild(a);

  a = document.createElement("td");
  anode = document.createElement("input")
  var b = document.createAttribute("type");
  b.value = "date";
  anode.setAttributeNode(b);
  a.appendChild(anode);
  x.appendChild(a);

  a = document.createElement("td");
  anode = document.createElement("input");
  b = document.createAttribute("type");
  b.value = "text";
  anode.setAttributeNode(b);
  a.appendChild(anode);
  x.appendChild(a);

  a = document.createElement("td");
  anode = document.createElement('input');
  anode.setAttribute('type', 'button');
  anode.setAttribute('value', 'Delete Row');
  anode.setAttribute('onclick', 'deleteRow(this)');
  a.appendChild(anode);
  x.appendChild(a);
  document.getElementById("t1").appendChild(x);
}

function deleteRow(e, v) {
  var tr = e.parentElement.parentElement;
  var tbl = e.parentElement.parentElement.parentElement;
  tbl.removeChild(tr);
}

table {
  border-collapse: collapse;
  margin: 10px;
}

table,
td,
th {
  border: 1px solid black;
  padding: 10px;
}

<table id="t1">
  <tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th>
      <input style="padding:10px" type="button" value="Add Row" onclick="add()" />
    </th>
  </tr>

  <tr>
    <td>1.</td>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <input type="date" />
    </td>
    <td>
      <input type="text" />
    </td>
    <td>
      <input type="button" value="Delete Row" onclick="deleteRow(this)" />
    </td>

  </tr>
</table>

digiliooo · Accepted Answer · 2015-12-19 06:00:39Z

1

I am hoping that I understood your question correctly - It sounds like you would like to notify the user if the date that they select is x number of days after (or before? This was unclear) the current date.

If that is the case, this should work for you. I set the limit to 2 days before or after the current date - so if there is a difference of at least +/- 2 days from the current date, you will get an alert.

This fires when the date input's value is changed

$(document).ready( function() {

  // When date input value is changed...
  $('.date').change( function() {
  
    // Create Date object for current date and date selected by user
    var today = new Date();
    var selectedDate = new Date( $(this).val() );
    
    // Use UTC to prevent daylight savings, etc. errors
    var milliseconds = 86400000;
    var utcToday = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
    var utcSelected = Date.UTC(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate());
    
    // Get difference (in days) between dates
    var result = Math.floor((utcSelected - utcToday) / milliseconds);
    
    // Check result, alert if at least +/- 2 days from current date
    if(result >= 2 || result <= -2)
    	alert("2+ days difference between current date and selected date");
  });
  
});

<!-- Include jQuery... assuming this is ok since you tagged this question with jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Added class "date" to input -->
<input class="date" type="date" />

answered Dec 19, 2015 at 6:00

digiliooo

8417 silver badges9 bronze badges

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

3 Comments

user5695111 Over a year ago

thanks for your response guy but it has some differences that my problem. I need to calculate differences between selected date and current date for instance it has < 1 day show alert message

digiliooo Over a year ago

Am I missing something? It seems like my answer should work for the problem you are describing... it finds the difference between the current date and the selected date. Then you can check the result of that difference and do whatever you want with it. I'm assuming that "for instance it has < 1 day" means that for the case that there is less than 1 day difference between the two dates, show an alert. In that case you would just have to alter the if statement that checks the result variable

user5695111 Over a year ago

In your code I select any date on calender , it always alert +2 days difference between the current date. But there are actually more than two days. Also according to my problem, it should not always alert for instance it may alert last 6 hours.

Jonathan Van Dam · Accepted Answer · 2015-12-19 00:28:54Z

0

You could use setTimeout this will essential call the specified function after the given milliseconds in this case after 3 seconds it will call myFunction.

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
function myFunction() {
    alert('Hello');
 }
</script>

answered Dec 19, 2015 at 0:28

Jonathan Van Dam

6469 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to add Timer on Html page using Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related