The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CALCULATING TIME DIFFERENCE BETWEEN TWO DIFFERENT TIME INPUT FIELDS WITHOUT DATE INTERVENTION
shankar from vizag
post Sep 7 2019, 01:00 AM
Post #1


Advanced Member
****

Group: Members
Posts: 202
Joined: 18-June 13
Member No.: 19,316



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 7 2019, 01:22 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



What have you tried? Show your code if you want help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 7 2019, 02:13 PM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Read this page, it might help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Sep 8 2019, 05:36 AM
Post #4


Advanced Member
****

Group: Members
Posts: 202
Joined: 18-June 13
Member No.: 19,316



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 8 2019, 01:13 PM
Post #5


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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: 405
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Sep 10 2019, 08:21 AM
Post #6


Advanced Member
****

Group: Members
Posts: 202
Joined: 18-June 13
Member No.: 19,316



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: 405



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Sep 10 2019, 11:26 AM
Post #7


Advanced Member
****

Group: Members
Posts: 202
Joined: 18-June 13
Member No.: 19,316



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: 405



Dear Charles,

What I thought is, https://www.w3resource.com/javascript-exerc...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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 10 2019, 01:17 PM
Post #8


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 11 2019, 12:51 PM
Post #9


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.

This post has been edited by CharlesEF: Sep 11 2019, 12:52 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Sep 14 2019, 05:02 AM
Post #10


Advanced Member
****

Group: Members
Posts: 202
Joined: 18-June 13
Member No.: 19,316



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 14 2019, 06:38 PM
Post #11


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Sep 15 2019, 08:34 AM
Post #12


Advanced Member
****

Group: Members
Posts: 202
Joined: 18-June 13
Member No.: 19,316



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 ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 15 2019, 12:38 PM
Post #13


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 15 2019, 03:30 PM
Post #14


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Maybe you can try changing the .js to .txt and upload it that way. I can always change it back.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Sep 20 2019, 11:41 PM
Post #15


Advanced Member
****

Group: Members
Posts: 202
Joined: 18-June 13
Member No.: 19,316



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: 292
Attached File  jquery.txt ( 84.89k ) Number of downloads: 279
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Sep 20 2019, 11:47 PM
Post #16


Advanced Member
****

Group: Members
Posts: 202
Joined: 18-June 13
Member No.: 19,316



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: 369
Attached File  mdtimepicker.css ( 16.05k ) Number of downloads: 290
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 21 2019, 06:23 AM
Post #17


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Sep 22 2019, 01:18 AM
Post #18


Advanced Member
****

Group: Members
Posts: 202
Joined: 18-June 13
Member No.: 19,316



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 22 2019, 09:11 AM
Post #19


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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: 373
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
johnwalsh1020
post Jan 7 2020, 01:56 AM
Post #20





Group: Members
Posts: 1
Joined: 7-January 20
Member No.: 27,114



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 Date and time in 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

This post has been edited by johnwalsh1020: Jan 7 2020, 01:56 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 04:14 AM