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>

Answer 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" />