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? — madox2
– madox2, Commented Dec 20, 2015 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
– Will, Commented Dec 20, 2015 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
– user5695111, Commented Dec 20, 2015 at 22:06
You could use moment.js. This is a very well tested time and date framework. — ssc-hrep3
– ssc-hrep3, Commented Dec 20, 2015 at 22:16

CoderPi · Accepted Answer · 2015-12-20 22:14:43Z

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, 2015 at 22:14

answered Dec 20, 2015 at 21:45

CoderPi

13.2k4 gold badges39 silver badges64 bronze badges

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

9 Comments

RobG Over a year ago

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.

user5695111 Over a year ago

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?

CoderPi Over a year ago

@user5695111 that was not in the question, but I will adapt the code, one second

user5695111 Over a year ago

thank you for your interest guy. It seems work efficiently and I examine in detail .

CoderPi Over a year ago

You are missing a ; before the alert, otherwise it should work fine.

|

RobG · Accepted Answer · 2015-12-20 22:22:31Z

0

 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>

answered Dec 20, 2015 at 22:22

RobG

148k32 gold badges180 silver badges216 bronze badges

2 Comments

user5695111 Over a year ago

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.

RobG Over a year ago

@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".

Puujee.Ts · Accepted Answer · 2018-08-13 07:53:15Z

0

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 ;
    }

answered Aug 13, 2018 at 7:53

Puujee.Ts

911 silver badge5 bronze badges

Collectives™ on Stack Overflow

Date diff Javascript

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related