Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ CALCULATING TIME DIFFERENCE BETWEEN TWO DIFFERENT TIME INPUT FIELDS WITHOUT DATE INTERVENTION

Posted by: shankar from vizag Sep 7 2019, 01:00 AM

GREETINGS

I HAVE TWO INPUT TEXTBOXES WHICH POPULATES TIME IN hh:mm tt (eg: 11:28 AM format).

I WANT TO DISPLAY THE DURATION BETWEEN THE ABOVE TWO TIMES IN THE THIRD TEXTBOX IN MINUTES.

I TRIED IN MANY WAYS, BUT FAILED.

KINDLY GUIDE ME IN THIS REGARD.

REGARDS

Posted by: CharlesEF Sep 7 2019, 01:22 AM

What have you tried? Show your code if you want help.

Posted by: CharlesEF Sep 7 2019, 02:13 PM

Read this https://www.toptal.com/software/definitive-guide-to-datetime-manipulation, it might help.

Posted by: shankar from vizag Sep 8 2019, 05:36 AM

QUOTE(CharlesEF @ Sep 7 2019, 11:52 AM) *

What have you tried? Show your code if you want help.


I kept two dropdown boxes with time in hhmm format. I want to show the duration between the two values in a textbox.

If I use timepicker plugins, not at all working. Hence, I kept my own style by placing dropdown boxes.

Still its not working. Dont know the fault I made.

Please guide me.

regards


Attached File(s)
Attached File  substract.html ( 861bytes ) Number of downloads: 360

Posted by: CharlesEF Sep 8 2019, 01:13 PM

This really isn't the way to do date math. But, it may work for your needs. Attached is the corrected page, you mixed up the Id for 1 select.
Attached File  substract.html ( 814bytes ) Number of downloads: 406

Posted by: shankar from vizag Sep 10 2019, 08:21 AM

QUOTE(CharlesEF @ Sep 8 2019, 11:43 PM) *

This really isn't the way to do date math. But, it may work for your needs. Attached is the corrected page, you mixed up the Id for 1 select.
Attached File  substract.html ( 814bytes ) Number of downloads: 406



Thank you Charles

Yes, it doesnt show the time. I will work on it to convert the number to time. If I fail, again I need your help.

regards

Posted by: shankar from vizag Sep 10 2019, 11:26 AM

QUOTE(CharlesEF @ Sep 8 2019, 11:43 PM) *

This really isn't the way to do date math. But, it may work for your needs. Attached is the corrected page, you mixed up the Id for 1 select.
Attached File  substract.html ( 814bytes ) Number of downloads: 406



Dear Charles,

What I thought is, https://www.w3resource.com/javascript-exercises/javascript-basic-exercise-51.php could help in converting a number to minutes.
But, in the example of the above link, the number is representing seconds, hence, by dividing it with 3600 we can get hours. But in my case, the difference between 0800 and 0900 is not seconds, its a number. I have wrongly assumed by this way I could get the result but failed.

Here, I want only minutes difference. e.g. 0800 - 0900 should display the value of document.getElementById("td1").value as 60 min.
0805 - 0810 => 05 min so on...

I tried and tried but failed. I didnt find any source in google also..

Kindly help me.


Posted by: CharlesEF Sep 10 2019, 01:17 PM

Since you posted no new code I can't see your approach. But, try this code to convert: new Date(SECONDS * 1000).toISOString().substr(11, 8);

Let me know how it goes.

Posted by: CharlesEF Sep 11 2019, 12:51 PM

Oh oh, I left some bad code in my answer (overlooked copy/paste). Anyway, this is how I would do time math:

CODE
  var s_date = new Date();
  s_date.setHours(8,30,0,0);
  var e_date = new Date();
  e_date.setHours(9,30,0,0);
  var diff = e_date - s_date;
  alert(new Date(diff).toISOString().substr(11, 5));

If you use this code you will need to split the time into hours and minutes OR give the user 2 selects, 1 for hour and 1 for minutes. Since you don't care about seconds and milliseconds I set them to 0.

Posted by: shankar from vizag Sep 14 2019, 05:02 AM

QUOTE(CharlesEF @ Sep 11 2019, 11:21 PM) *

Oh oh, I left some bad code in my answer (overlooked copy/paste). Anyway, this is how I would do time math:
CODE
  var s_date = new Date();
  s_date.setHours(8,30,0,0);
  var e_date = new Date();
  e_date.setHours(9,30,0,0);
  var diff = e_date - s_date;
  alert(new Date(diff).toISOString().substr(11, 5));

If you use this code you will need to split the time into hours and minutes OR give the user 2 selects, 1 for hour and 1 for minutes. Since you don't care about seconds and milliseconds I set them to 0.



Dear Charles

I tried with many ways, none of them giving result. I am attaching my form here. Please look in and guide me.

I have used timepicker plugins and upload is not accepting .js extension files. So, I have attached all accepted files.




Attached File(s)
Attached File  timediff.html ( 3.2k ) Number of downloads: 312
Attached File  w3.css ( 22.94k ) Number of downloads: 297
Attached File  jquery_ui.min.css ( 31.32k ) Number of downloads: 306
Attached File  bootstrap.min.css ( 118.36k ) Number of downloads: 330

Posted by: CharlesEF Sep 14 2019, 06:38 PM

You didn't attach any Javascript files. I don't get a timepicker unless you attach the JS files. Exactly what does this mean? 'upload is not accepting .js extension files' Why are you trying to upload a JS file?

Posted by: shankar from vizag Sep 15 2019, 08:34 AM

QUOTE(CharlesEF @ Sep 15 2019, 05:08 AM) *

You didn't attach any Javascript files. I don't get a timepicker unless you attach the JS files. Exactly what does this mean? 'upload is not accepting .js extension files' Why are you trying to upload a JS file?


Dear Charles

THE FOLLOWING ERROR(S) WERE FOUND while attaching the .js files ?
Upload failed. You are not permitted to upload a file with that file extension

How to send to you, is there any alternative way ?

Posted by: CharlesEF Sep 15 2019, 12:38 PM

Oh, that error is unknown to me. I don't know how this site handles JS uploads. Anyway, just post the names of the files and I can search for them.

Posted by: CharlesEF Sep 15 2019, 03:30 PM

Maybe you can try changing the .js to .txt and upload it that way. I can always change it back.

Posted by: shankar from vizag Sep 20 2019, 11:41 PM

QUOTE(CharlesEF @ Sep 16 2019, 02:00 AM) *

Maybe you can try changing the .js to .txt and upload it that way. I can always change it back.


Dear Charles

Sorry for the delayed reply. I have attached all .js files into .txt format. Kindly have a look.

this mail I am adding 2 .js files as .txt files as the size of the file not permitting to add in one mail. In another mail I will add rest .js files.


Attached File(s)
Attached File  bootstrap.min.txt ( 36.18k ) Number of downloads: 293
Attached File  jquery.txt ( 84.89k ) Number of downloads: 279

Posted by: shankar from vizag Sep 20 2019, 11:47 PM

QUOTE(CharlesEF @ Sep 16 2019, 02:00 AM) *

Maybe you can try changing the .js to .txt and upload it that way. I can always change it back.


Dear Charles

I have added 1 .js file 1 .css file to this mail as attachment.

one more file left jquery-ui.js, which is of 530 kb and this site has a size constraint to 300 kb. what shall I do now ? Please guide me.

regards
shankar sb


Attached File(s)
Attached File  mdtimepicker.txt ( 13.95k ) Number of downloads: 372
Attached File  mdtimepicker.css ( 16.05k ) Number of downloads: 291

Posted by: CharlesEF Sep 21 2019, 06:23 AM

Better yet, just show me the format of the time element. Is it HH:MM:SS or what? I really don't want to install jQuery or bootstrap.

Posted by: shankar from vizag Sep 22 2019, 01:18 AM

QUOTE(CharlesEF @ Sep 21 2019, 04:53 PM) *

Better yet, just show me the format of the time element. Is it HH:MM:SS or what? I really don't want to install jQuery or bootstrap.


Dear Charles

The required time format is HH:mm along with AM/PM

eg: 11:48 AM

Posted by: CharlesEF Sep 22 2019, 09:11 AM

Attached is the example you wanted. I just did a web search and found this. I feel I'm not helping you learn. You seem to just come here for an answer. Am I wrong?
Attached File  time.html ( 779bytes ) Number of downloads: 374

Posted by: johnwalsh1020 Jan 7 2020, 01:56 AM

Why you can not use toLocaleDateString() inbuilt javascript function. This function is capable to give you return as per your format. Here is my code snippet to use it.

CODE
// Parse our locale string to [date, time]
var date = new Date().toLocaleString('en-US',{hour12:false}).split(" ");

// Now we can access our time at date[1], and monthdayyear @ date[0]
var time = date[1];
var mdy = date[0];

// We then parse  the mdy into parts
mdy = mdy.split('/');
var month = parseInt(mdy[0]);
var day = parseInt(mdy[1]);
var year = parseInt(mdy[2]);

// Putting it all together
var formattedDate = year + '-' + month + '-' + day + ' ' + time;


Default Date.toLocaleString() returns is a format of:

MM/DD/YYYY, HH:MM:SS

Morover, you can use Date() function to create an date object with the current date. If you want to get date in specific format you might need to refer https://speedysense.com/get-current-date-time-javascript/ article. Here is snipprt for the date object.

CODE
var today = new Date();
var date = today.getFullYear() + '-' + (today.getMonth()+1) + '-' + today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var date_time = date + ' ' + time;


Thank you

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)