Formidable Forms Community Site

The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group

Slack Signup
Newsletter Optin
Help Desk
Subscribe

Calculate Time Difference with JavaScript

Labels

This Discussion is public

Notifications

FORM FIELDS

Clock In Time: is a lookup field. The Field Key is qtr1j.

The Green Button: is an html field. Contain the following html code. Click this button<br/> to clock out:<br/><input type="button" id='1' onClick="show(this.id)"; "diff(start, end)";/>

Clock Out Time: is a text Field. The Field Keyis 7ufku3.

Hours Worked Field: is a text field. The Field Key is 40myq.

JAVASCRIPT

<script type="text/javascript">
var my_time_now_hr = new Date().toLocaleTimeString('en-US', { hour12: false,
hour: "numeric",
minute: "numeric"});
function show(id) {
if (id == 1) {
$("#field_7ufku3").val(my_time_now_hr);
$("#field_7ufku3").change();
}
}
</script>
<script>
jQuery(document).ready(function($){
$('#field_7ufku3, #field_qtr1j').change(function(){
var end = $("#field_7ufku3").val();
var start = $("#field_qtr1j").val();
function diff(start, end) {
start = start.split(":");
end = end.split(":");
var startDate = new Date(0, 0, 0, start[0], start[1], 0);
var endDate = new Date(0, 0, 0, end[0], end[1], 0);
var diff = endDate.getTime() - startDate.getTime();
var hours = Math.floor(diff / 1000 / 60 / 60);
diff -= hours * 1000 * 60 * 60;
var minutes = Math.floor(diff / 1000 / 60);

return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
}
$("#field_40myq").val(diff(start, end));
$("#field_40myq").change();

</script>

Reference
http://stackoverflow.com/questions/10804042/calculate-time-difference-with-javascript

Thanks for sharing!

You are welcome.

Thanx this is just what I need - I am having a problem and as a non coder I wonder if you could help. I get an error message when I try to activate this. I assume I am correct putting the code in my Snippetts area. The error I get is: The snippet has been deactivated due to an error on line 1:
syntax error, unexpected '<'

Wonder if you may point me in the right direction? Thanx Andrew

My code is:

<script type="text/javascript">
var my_time_now_hr = new Date().toLocaleTimeString('en-US', { hour12: false,
hour: "numeric",
minute: "numeric"});
function show(id) {
if (id == 1) {
$("#field_xg3zw").val(my_time_now_hr);
$("#field_xg3zw").change();
}
}
</script>

<script>
jQuery(document).ready(function($){
$('#field_xg3zw, #field_nzuil').change(function(){
var end = $("#field_xg3zw").val();
var start = $("#field_nzuil").val();
function diff(start, end) {
start = start.split(":");
end = end.split(":");
var startDate = new Date(0, 0, 0, start[0], start[1], 0);
var endDate = new Date(0, 0, 0, end[0], end[1], 0);
var diff = endDate.getTime() - startDate.getTime();
var hours = Math.floor(diff / 1000 / 60 / 60);
diff -= hours * 1000 * 60 * 60;
var minutes = Math.floor(diff / 1000 / 60);

return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
}
$("#field_w6rtz").val(diff(start, end));
$("#field_w6rtz").change();

</script>

Attachment:

Discussion closed.