Date diff Javascript

Question

Hello guys I am just learning Js and I have a problem that differences two date. I want to calculate differences between current date and any date from calender. User should select date whatever you want on calender. My simple code following and I need to improve it thanks for all response.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<script>

 var selectedDateFromCalendar = new Date();
 selectedDateFromCalendar = document.getElementById('mydate').value;

 var currentdate = new Date();
 currentdate = document.getElementById("current").value;

 var diff = selectedDateFromCalendar - currentdate  ;
 alert(diff);

</script>
</head>

<body>
<p id="current"></p>
<input type="date" id="myDate">

</body>
</html>

Possible duplicate of [Get difference between 2 dates in javascript?](http://stackoverflow.com/questions/3224834/get-difference-between-2-dates-in-javascript) — madox2, Dec 20 '15 at 21:43
No need to var selectedDateFromCalendar = new Date() then to set it to value of input field on the next line. Simply do this "var selectedDateFromCalendar = document.getElementById('mydate').value;". However, you have to make sure the input fields contain correct dates. There are a few ways, let us know if you need some help there. — Will, Dec 20 '15 at 21:44
I saw "Get difference between 2 dates in javascript? " question but my question has some difference. There are non defined dates in my question . In that question there are already defined — user5695111, Dec 20 '15 at 22:06
You could use ``moment.js``. This is a very well tested time and date framework. — ssc-hrep3, Dec 20 '15 at 22:16

CoderPi · Accepted Answer · 2015-12-20T22:14:43.440

1

There where quite some mistakes, I fixed them all here:

If you can't understand some of this please feel free to leave a comment.

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <p id="current">2015-12-20</p>
  <input type="date" id="myDate" value="2015-12-25">


  <script>
    document.getElementById('myDate').onchange = function() {
      var selectedDateFromCalendar = this.value;

      var currentdate = new Date();
      document.getElementById("current").textContent = currentdate.toUTCString();

      var diff = new Date(selectedDateFromCalendar) - currentdate;
      var days = diff / 1000 / 60 / 60 / 24
      alert(days + " days"); // or use Math.floor(days)
    }
  </script>
</body>

</html>

edited Dec 20 '15 at 22:14

answered Dec 20 '15 at 21:45

CoderPi

12,985
4
34
62

1

Your answer should include why the OP has their issue and how or why your code fixes it. Just providing code isn't very helpful. – RobG Dec 20 '15 at 22:05
thanks for response guy. But my question bit a different . There should be non defined date in calender. User shoud select the date whatever you want. Also how can I convert the milliseconds to day? – user5695111 Dec 20 '15 at 22:08
@user5695111 that was not in the question, but I will adapt the code, one second – CoderPi Dec 20 '15 at 22:10
thank you for your interest guy. It seems work efficiently and I examine in detail . – user5695111 Dec 20 '15 at 22:33
@user4339170 guys can we convert " var diff = new Date(selectedDateFromCalendar) - currentdate; " in following way ? var diff = new Date(selectedDateFromCalendar) - currentdate; if((selectedDateFromCalendar) - currentdate ) < 1){ var days = diff / 1000 / 60 / 60 / 24 alert(days + " days"); } – user5695111 Dec 20 '15 at 23:10
1

You are missing a `;` before the alert, otherwise it should work fine. – CoderPi Dec 21 '15 at 08:00
thanks @user4339170. I put a ";" before the alert but now I got syntax error here "< 1" :/ – user5695111 Dec 21 '15 at 11:43
you should be able to solve syntax errors on your own - it is here `selectedDateFromCalendar)` the bracket is too much – CoderPi Dec 21 '15 at 12:01
@user5695111—NO. Not all browsers in use support input type date. Some will not correctly parse the string either entered by the user or provided by the Date input. Some browsers will treat yyyy-mm-dd as local, some as UTC. Most will treat yyyy/mm/dd as local but some as NaN. – RobG Dec 24 '15 at 10:33

score 0 · Answer 2 · answered Dec 20 '15 at 22:22

 var selectedDateFromCalendar = new Date();
 selectedDateFromCalendar = document.getElementById('mydate').value;

You seem to be trying to set the Type of selectedDateFromCalendar, but javascript variables don't have a Type, values do, so just assign values.

The value of a form control is always a string, so even though you initially assigned a Date as the value, selectedDateFromCalendar is now a string.

 var diff = selectedDateFromCalendar - currentdate  ;

This attempts to subtract one string from another. It "works" where the strings can be converted to numbers (e.g. '5' - '3') but not for other types of string.

Since the value returned from the form input is a string, you have to parse it. Do not ever use Date.parse or the Date constructor to parse strings. I can't emphasise that enough, just don't do it.

You should indicate the format of string you want. Then, parse the string manually (a library can help but isn't really necessary) e.g.

// Parse and validate a string in DMY format
function parseDMY(s) {
  var b = s.split(/\D/);
  var d = new Date(b[2], --b[1], b[0]);
  return d && d.getMonth() == b[1]? d : new Date(NaN);
}

// Get the date from a form and subtract from today's date
function dateDiff(idIn, idOut) {
  var d = parseDMY(document.getElementById(idIn).value);
  var result;
  if (isNaN(d)) {
    result = 'Invalid date';
  } else {
    result = d - new Date();  // difference in milliseconds
  }
  document.getElementById(idOut).textContent = result;
}

<label for="starDate">Start date (dd/mm/yyyy)<input id="startDate" name="startDate" value="25/12/2015"></label>
<br>
<button onclick="dateDiff('startDate','result')">Get date diff</button>
<div id="result"></div>

Thanks for your response guy. But my question a bit different. You define the start date . My question was that there aren't any defined date user should be select whatever you want. — user5695111, Dec 20 '15 at 22:37
@user5695111—you can enter any date you like into the input, the value is there as an initial value for convenience. Please don't call me "guy". — RobG, Dec 21 '15 at 00:24

score 0 · Answer 3 · answered Aug 13 '18 at 07:53

getDateDiff(time1, time2) {
      var t2 = new Date(time1);
      var t1 = new Date(time2);
      var diffMS = t1 - t2;
      var ret = "";
      ret = ret + parseInt(diffMS / 1000 / 60 / 60).toString() + " hours ";
      diffMS = diffMS - parseInt(diffMS / 1000 / 60 / 60) * 60 * 60 * 1000;
      ret = ret + parseInt(diffMS / 1000 / 60).toString() + " min ";
      diffMS = diffMS - parseInt(diffMS / 1000 / 60) * 60 * 1000;
      ret = ret + parseInt(diffMS / 1000).toString() + " sec";
      return ret ;
    }

Date diff Javascript

3 Answers3

Linked