Substract 2 dates from input datetime-CodePudding

I'm collecting 2 dates from inputs and I'd like to display the difference (in hours and minutes) of those two dates. But when I try to get the difference, it returns NaN. Does anyone know how to transform a getElementById value into a substractable (not sure it's a word) number ?

<div >
  <input type="text" value="Heure début" />
  <input type="datetime-local" id="begin-time" name="meeting-time" value="" min="2018-06-07T00:00"
            max="2022-06-14T00:00"><br />
  <input type="text" value="Heure fin" />
  <input type="datetime-local" id="end-time" name="meeting-time" value="" min="2018-06-07T00:00"
            max="2022-06-14T00:00"><br />
  <p id="difference"></p>
  <v-btn @click="differenceTime()">VALIDER</v-btn>
</div>

I want to substract the end-time with the begin-time and then display the difference in the p (id=difference).

CodePudding user response：

Your inputs should be getting their values from your component props or data. Not sure what version of Vue you are using.

Also you should refrain from accessing the DOM directly when using a framework like Vue.

CodePudding user response：

You can do this:

function differenceTime() {
  $('#difference').text( (Date.parse( $( '#end-time' ).val() ) - Date.parse( $( '#begin-time' ).val() ) )/(1000*60*60)   ' Hours');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <input type="text" value="Heure début" />
  <input type="datetime-local" id="begin-time" name="meeting-time" value="" min="2018-06-07T00:00"
            max="2022-06-14T00:00"><br />
  <input type="text" value="Heure fin" />
  <input type="datetime-local" id="end-time" name="meeting-time" value="" min="2018-06-07T00:00"
            max="2022-06-14T00:00"><br />
  <p id="difference"></p>
  <button onClick="differenceTime()">VALIDER</button>
</div>

CodePudding user response：

$("#differenceTime").click(function() {
  let b = $("#begin-time").val()
  let e = $("#end-time").val()
  let toDateB = new Date(b)
  let toDateE = new Date(e)
  const diffTime = Math.abs(toDateB - toDateE);
  var hours = Math.ceil(diffTime / 36e5);
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  console.log(hours   " hours");
  console.log(diffDays   " days");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <input type="text" value="Heure début" />
  <input type="datetime-local" id="begin-time" name="meeting-time" value="" min="2018-06-07T00:00"
            max="2022-06-14T00:00"><br />
  <input type="text" value="Heure fin" />
  <input type="datetime-local" id="end-time" name="meeting-time" value="" min="2018-06-07T00:00"
            max="2022-06-14T00:00"><br />
  <p id="difference"></p>
  <button id="differenceTime">VALIDER</button>
</div>

Get the value of the input and declare new Date(begin-time) When a date object is created, a number of methods allow you to operate on it. Date methods allow you to get and set the year, month, day, hour, minute, second, and millisecond of date objects, using either local time or UTC (universal, or GMT) time.

new Date(date string) creates a date object from a date string

let toDateB = new Date(begin-time)

check this : https://jsfiddle.net/4bvxfou9/2/