Javascript to calculate the date and time difference

By: Tania Watts | Asked: 06/22/2022
ForumsCategory: General questionsJavascript to calculate the date and time difference
Tania Watts asked 2 years ago
Hi there, I have a two Time fields on a Workers Time Sheet form
Start Time (start_time1)
End Time (end_time1) and a numeric field accounting for minutes the worker took as a break.
Break Time (break1) I need to calculate the TOTAL hours worked by End Time - Start Time - Break Time.
eg. 8:00 AM - 2:00 PM with a 1 hour break = 5 hours working

You can see on the screenshot attached the code is calculating (2 - 8 - 1 = -7)
It actually should convert 2pm to 14 (14 - 8 - 1 = 5) Below is the code that is not working because you will see that on the line labelled HERE
it outputs the End Time as 2:00 and not 2:00 PM Is there something wrong in using this line to get the selected time:

var end_time = $("#field_end_time1").val(); Any help would be most appreciated. (
   function adjust_total() {
   // On the change event of the start and end times, change the total time worked
   var total_label = "#field_total_extra1";
   var start_time = $("#field_start_time1").val();
   var end_time = $("#field_end_time1").val();
   var break_time = $("#field_break1").val();
      end_time = end_time.slice(0,5);
      start_time = start_time.slice(0,5)

      if(start_time !="" && end_time !=""){
		console.log("Original end time = " + end_time); // HERE
         start_time = start_time.split(":");
         end_time = end_time.split(":");
		 var starttime_hours = start_time[0];
		 var starttime_mins = start_time[1];
		 var endtime_hours = end_time[0];
		 var endtime_mins = end_time[1];

         var startDate = new Date(0, 0, 0, starttime_hours, starttime_mins, 0);
         var endDate = new Date(0, 0, 0, endtime_hours, endtime_mins, 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);
         minutes = (minutes < 9 ? "00" : minutes);
         numb = hours + (minutes/60) - (break_time/60);
         $(total_label).val(numb);
         $(total_label).change();
      } 
	  
   }
 
Attachments
2 Answers
Victor Font answered 2 years ago

I'm assuming that you are not using Formidable's time field to capture the times. Your image looks like a standard drop down, not a Formidable time field. Formidable time fields use 3-selects per field for Hours, minutes, and AM/PM.

Your code is doing exactly what it's programmed to do. Slice is supposed to be used for splitting arrays. not text strings. With text strings, slice works like substr() and takes the first 5-characters of the field's value. The first 5 characters of "2:00 PM" is "2:00 ". That's the result of your splice. You are not testing for AM/PM. Where are you converting it to 14 before you reach the HERE line?

If you're going to use dropdowns instead of time fields, I suggest you use separate values in your dropdowns. Show the labels as 12-hr. time with the AM/PM indicators and set the value to 24-hr. notation.

Bobby Clapp replied 2 years ago

An alternative may be to manually create the times in a drop-down field and then changed the saved value of the drop-down to the "minute" equivalent offset from 12am. Then you can use built in shortcode calculations to calculate the time worked and not have to use custom code.

Example:
Start: 8am = 8 (8 hours offset from 12am) *60 = 480 for the saved value in minutes
End: 2pm = 14 (14 hours offset from 12am) *60 = 840 for the saved value in minutes
Break: 60 minutes

Total Calculation = (840-480-60)/60 = 5 (5 hrs worked)

This would work well if they don't work beyond midnight.

Tania Watts answered 2 years ago
Hi Victor, I am definitely using the Formidable Forms Time Field. See attached screenshot.   Thanks, Tania
Attachments
Victor Font replied 2 years ago

You must have "show a single time dropdown" checked to display the field as you have it configured. The field's appearance is irrelevant though. Your Javascript is still incorrect regardless of the way the field displays.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right