Javascript to calculate the date and time different in Repeater Field

By: Kingsley Ezeanochie | Asked: 06/08/2022
ForumsCategory: Code HelpJavascript to calculate the date and time different in Repeater Field
Kingsley Ezeanochie asked 2 years ago

Hi Helper,
I have a form where there are Date Range fields after it was a repeater field which also has a date field, but I want the date field in the repeater field to be within the date range above. However, I noticed that when I tried to set the Date Range as the minimum and maximum date field in the repeater date field, for whatever reason I can't seem to find the fields of the Date Range but once I take the date field outside the repeater field I will be able to access the Date Range field in the minimum and maximum date setting. However, I want the date field to be in the repeater field, how do I access the Date Range fields inside the repeater?
Also inside the repeater, there are fields such as starting date, time and end date, and time in repeater field, I added a javascript to help me calculate the difference in starting date, time and end date, and time. This script works well if the fields are not in the repeater field. However, because those fields are inside a repeater, the script appears not to work. Any help on how to get the script work with fields inside the repeater as i need this to work inside the repeater.
 
This is the script
 
<script type="text/javascript">
jQuery(document).ready(function($){
$('#field_timesheet-shift-end-time_H,#field_timesheet-shift-end-time_m,#field_timesheet-shift-end-time_A,#field_timesheet-shift-start-time_H,#field_timesheet-shift-start-time_m,#field_timesheet-shift-start-time_A,#field_timesheet-shift-start-date,#field_timesheet-shift-end-date').change(function(){ 

var strtdate= $("#field_timesheet-shift-start-date").val();
var start_hour = $("#field_timesheet-shift-start-time_H").val();
var start_mins = $("#field_timesheet-shift-start-time_m").val();
var start_period= $("#field_timesheet-shift-start-time_A").val();
 
var endate = $("#field_timesheet-shift-end-date").val();
var end_hour = $("#field_timesheet-shift-end-time_H").val();
var end_mins = $("#field_timesheet-shift-end-time_m").val();
var end_period= $("#field_timesheet-shift-end-time_A").val();

if(end_mins !=="" && start_hour !=="" && start_mins!=="" && end_hour !=="" ){

var start = start_hour+":"+start_mins+" "+start_period;
var end = end_hour + ":" + end_mins + " " +end_period;
 
var startDate = new Date(strtdate+" " +start);
console.log(startDate);
var endDate = new Date(endate+" " +end);
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);

var minutesToDecimal = Math.floor(minutes / 60 * 100)
console.log(hours + "."+minutesToDecimal);
$("#field_timesheet-total-hour").val(hours + "."+minutesToDecimal); 
$("#field_timesheet-total-hour").change();

}
});

});
</script>

Attachments
1 Answers
Bobby Clapp answered 2 years ago
If I understand the issue right, fields within a repeater are some sort of index of the parent field ID. Field ID #field_timesheet-shift-end-time_H, might be #field_timesheet-shift-end-time_H[0], and then #field_timesheet-shift-end-time_H[1], when inside a repeater. You can dig through the web developer console to see this. You have to use some coding logic to work through those independently to work with the correct fields.
Kingsley Ezeanochie replied 2 years ago

Hi Bobby,

Thanks for the response, Can you point me to any web developer console link so i can dig deeper, cause my searches are not given me any meaningful answer

Bobby Clapp replied 2 years ago

If you are on a windows device, most web browser developer tools acan be brought up via the f12 key. Here is some video on the developer tools: https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

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