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
Full Version: CALCULATING TIME DIFFERENCE BETWEEN TWO DIFFERENT TIME INPUT FIELDS WITHOUT DATE INTERVENTION
What have you tried? Show your code if you want help.
Read this page, it might help.
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
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.
Click to view attachment
Click to view attachment
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.
Click to view attachment
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
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.
Click to view attachment
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.
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.
Let me know how it goes.
Oh oh, I left some bad code in my answer (overlooked copy/paste). Anyway, this is how I would do time math:
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.
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));
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.
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));
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.
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?
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 ?
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.
Maybe you can try changing the .js to .txt and upload it that way. I can always change it back.
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.
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
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.
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
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?
Click to view attachment
Click to view attachment
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.
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.
Thank you
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;
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;
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 is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.