Using Timepicker for 24 hour calculation

replied on September 5, 2017

Hi Ziad,

Did you use formula or custom JavaScript for calculation? Can you post the details of your current implementation so we could check how the issue can be resolved?

0 0

View 6 previous replies

replied on September 9, 2017

Hi Rui,

Example below:

-----

$(document).ready(function () {
$.getScript('http://IPADDRESS/forms/js/jquery.timepicker.js', function() {
$('.picker1 input').timepicker({ 'timeFormat' : 'H:i','step': 15, 'scrollDefault': 'now' });
$('.cf-table-add-row').click(function () {
$('.picker1 input').timepicker({'timeFormat' : 'H:i', 'step': 15, 'scrollDefault': 'now' });
});
});
$.getScript('http://IPADDRESS/forms/js/jquery.timepicker.js', function() {
$('.picker2 input').timepicker({'timeFormat' : 'H:i', 'step': 15, 'scrollDefault': 'now' });
$('.cf-table-add-row').click(function () {
$('.picker2 input').timepicker({'timeFormat' : 'H:i', 'step': 15, 'scrollDefault': 'now' });
});
});


$('.cf-table-block').on('blur', 'input', CalculateTime);
function CalculateTime() {
var Time1Total = 0;
var Shrs = 0;
var Fhrs = 0;
var Total1 = 0;
$('#qxx tbody tr').each(function() { //Targeting table id qxx
   var s1 = 0;
var f1 = 0;
var t1 = 0;
var s1 = $(this).find('.picker1 input').val(); //targeting picker1 css class
var f1 = $(this).find('.picker2 input').val(); //targeting picker2 css class
// console.log(s1);
// console.log(f1);
    Shrs += s1;
Fhrs += f1; //updating outside variables.


//Setting separate Hour and Minute Variables to call later
   var TS1array = Shrs.split(':');
   var TS1Hrs = TS1array[0];
   var TS1Mins = TS1array[1];

   var TF1array = Fhrs.split(':');
   var TF1Hrs = TF1array[0];
   var TF1Mins = TF1array[1];

   var Time1Check = TF1Hrs-TS1Hrs;
   //Time calculation from variables above and check if 0

       if (Time1Check >= 0)
        {
       t1 = TF1Hrs-TS1Hrs+(TF1Mins*.01)/.6-(TS1Mins*.01)/.6;
}
Time1Total += t1;
$(this).find('.DailyHours input').val(Time1Total);
// console.log(Time1Total);
Total1 += Time1Total;
console.log(Total1);
//Total1 = 0;
Time1Total =0;
Shrs =0;
Fhrs =0; //sets totals back to zero for next row.

});
$('#qxx input').val(Total1); //updates external total field
}

});
-----

Hope this helps, please note that the #qxx = Field variables within the Form that i did not add,

Thank you

Ziad

0 0

replied on October 1, 2018

so the CSS would be #qxx tbody tr for the table then #qxx for the final external table total?

0 0

replied on October 1, 2018

Hi Jeremiah,

That is correct,

Ziad

0 0

replied on October 1, 2018

unfortunately it did not work

0 0

replied on October 1, 2018

Hi Jeremiah,

To confirm, you have added the timepicker details within the Forms server and they are working as they should correct?

Can you if possible provide a screenshot of the #q within the JavaScript screen? and also the code?

Many thanks

Ziad

0 0

replied on October 2, 2018 • Show version history

so this is the code that I am using, the timpicker portion is working just not the calculation

$(document).ready(function () {
$.getScript('https://lf.on-sitesvcs.com/forms/js/jquery.timepicker.min.js', function() {
$('.picker1 input').timepicker({ 'step': 15, timeFormat: 'H:i:s', 'scrollDefault': 'now' });
$('.cf-table-add-row').click(function () {
$('.picker1 input').timepicker({ 'step': 15, timeFormat: 'H:i:s', 'scrollDefault': 'now' });
});
});
$.getScript('https://lf.on-sitesvcs.com/forms/js/jquery.timepicker.min.js', function() {
$('.picker2 input').timepicker({ 'step': 15, timeFormat: 'H:i:s', 'scrollDefault': 'now' });
$('.cf-table-add-row').click(function () {
$('.picker2 input').timepicker({ 'step': 15, timeFormat: 'H:i:s', 'scrollDefault': 'now' });
});
});


$('.cf-table-block').on('blur', 'input', CalculateTime);
function CalculateTime() {
var Time1Total = 0;
var Shrs = 0;
var Fhrs = 0;
var Total1 = 0;
$('#qxx tbody tr').each(function() { //Targeting table id qxx
var s1 = 0;
var f1 = 0;
var t1 = 0;
var s1 = $(this).find('.picker1 input').val(); //targeting picker1 css class
var f1 = $(this).find('.picker2 input').val(); //targeting picker2 css class
// console.log(s1);
// console.log(f1);
Shrs += s1;
Fhrs += f1; //updating outside variables.


//Setting separate Hour and Minute Variables to call later
var TS1array = Shrs.split(':');
var TS1Hrs = TS1array[0];
var TS1Mins = TS1array[1];

var TF1array = Fhrs.split(':');
var TF1Hrs = TF1array[0];
var TF1Mins = TF1array[1];

var Time1Check = TF1Hrs-TS1Hrs;
//Time calculation from variables above and check if 0

if (Time1Check >= 0)
{
t1 = TF1Hrs-TS1Hrs+(TF1Mins*.01)/.6-(TS1Mins*.01)/.6;
}
Time1Total += t1;
$(this).find('.DailyHours input').val(Time1Total);
// console.log(Time1Total);
Total1 += Time1Total;
console.log(Total1);
//Total1 = 0;
Time1Total =0;
Shrs =0;
Fhrs =0; //sets totals back to zero for next row.

});
$('#qxx input').val(Total1); //updates external total field
}

});

and here is the CSS for the table and the CSS for the external total

CSS Capture.PNG (17.64 KB)

| Download

CSS Capture Total.PNG (21.12 KB)

| Download

0 0

replied on October 2, 2018

HI Jeremiah,

You are not required to enter any details within the CSS classes for the table.

The qxx was just an example of what needs to be used,

When you are in Javascript screen, just above the table, it details the q(number) required as an example my table is q8 as per below:

$('.cf-table-block').on('blur', 'input', CalculateTime);
function CalculateTime() {
var Time1Total = 0;
var Shrs = 0;
var Fhrs = 0;
var Total1 = 0;
$('#q8 tbody tr').each(function() { //Targeting table id q8
var s1 = 0;
var f1 = 0;
var t1 = 0;
var s1 = $(this).find('.picker1 input').val(); //targeting picker1 css class
var f1 = $(this).find('.picker2 input').val(); //targeting picker2 css class
// console.log(s1);
// console.log(f1);
Shrs += s1;
Fhrs += f1; //updating outside variables.

This is in reference to the following on the form:

Hope that gives you a better understanding :)

Let us know how you go?

Thank you

Ziad

0 0

replied on October 2, 2018 • Show version history

Hi Jeremiah,

Also:

$('#qxx input').val(Total1); //updates external total field

this is for an external field outside of the table to calculate the total. Just make sure to update the #qxx to the related field ID number. I think that this works best in a single line field over a number field, Ziad would be able to confirm.

Kind Regards,

Aaron

0 0

replied on October 4, 2018

I got it to work, Thank you!

0 0

replied on September 6, 2017

Hi Ziad,

An idea could be to get the time difference for the start time to midnight.

i.e. 22:00 to 07:00 = 24-22 + 7 = 9hrs

You'll have to modify your javascript slightly, but it works in theory

0 0

View 1 previous reply

replied on September 9, 2017

Hi Aaron,

In your instance, you mean I will need to set an IF condition on that field to check if the Values from the first field are larger than the second field and then do the calculation?

Am I right in saying this?

Thanks

Ziad

0 0

SELECTED ANSWER

replied on September 10, 2017 • Show version history

Hey Ziad,

Where it checks whether the Time is above a zero Value add an else. So my idea is basically -

if (Time1Check >= 0)
{
t1 = TF1Hrs-TS1Hrs+(TF1Mins*.01)/.6-(TS1Mins*.01)/.6;
}

else //Will run if finish hours/time are less than starting hours/time

{

t1 = (24-TS1Hrs)+TF1Hrs+(TF1Mins*.01)/.6-(TS1Mins*.01)/.6;

}

I haven't actually tested the code to see if it works though. The idea is that if it falls into a negative number, it will use the else condition over the initial calculation you are currently doing.

0 0

replied on September 24, 2017

Hey Aaron,

That was perfect, with a little modification based on the below, the calculations are correct and the Timesheet can do 24 hour calculations:

else //Will run if finish hours/time are less than starting hours/time

{

t1 = parseInt(24)-parseInt(TS1Hrs) +parseInt(TF1Hrs)+(TF1Mins*.01)/.6-(TS1Mins*.01)/.6;

}

Thanks again for your assistance in this,

Regards

Ziad

0 0

replied on September 24, 2017

No Problem Ziad. Yeah i forgot to say that it might only see the values as string values. Just assumed it would work as the inital calculations were working for you.

1 0

Question

Question

Using Timepicker for 24 hour calculation

Answer

Replies

Sign in to reply to this post.