Join the Team Forms community

141
members
11
new
J
d
B
R
M

include hours and minutes when calculating difference between two date/time fields.

Last updated last week
c
carlos

Calculate the difference between two date/time fields | Team Forms Docs

I'm using this method with date input disabled but the value doesn't show the minutes, only the hours


I sent a message to support and got this response:

"To achieve this you will need to use JavaScript which can get a little complex. Unfortunately, we are unable to provide assistance with writing your JavaScript expressions in this chat, however we have recently launched our community forum where you may be able to post your question."


Unfortunately I don't know JavaScript, so I'm looking for either of two things. 1, a reliable source of JavaScript syntax or 2, help.

E
Erin Dwyer
Marked as solution

Hi Carlos,

Within the cited tutorial it uses a number component to represent the hours between two date/time fields. However, it sounds like you want both hours and minutes which is probably better represented as a text field (e.g HH:mm). So, to achieve what you are describing you could use the following steps.

  1. Drag and drop two separate date/time fields into your form.

  2. Drag and drop a text field into your form to represent the time difference.

  3. In the data tab of the number field scroll down to the calculated value section and enter in the following JavaScript code. Note that you will need to adapt the code to match the field names for your specific form.

JavaScript
// Create a string representing the duration between two dateTimes in the form HH:mm
function diffTime(endTime, startTime){
    const startDateTime = moment(startTime);
    const endDateTime = moment(endTime);
    const duration = moment.duration(endDateTime.diff(startDateTime));
    // Format the difference as HH:mm
    return `${Math.floor(duration.asHours()).toString().padStart(2, '0')}:${duration.minutes().toString().padStart(2, '0')}`;
}

value = diffTime(data.endDate, data.startDate)


Here is an example of the outcome:


Team Forms Showing time difference calculation in HH:mm format


As for a JavaScript syntax reference I recommend the one below. However, since JavaScript is the most widely use language online you should be able to find additional reference that you may prefer. Chat GPT is also generally pretty good at writing JavaScript.


View full solution
E
1 comment
E
Erin Dwyer

Hi Carlos,

Within the cited tutorial it uses a number component to represent the hours between two date/time fields. However, it sounds like you want both hours and minutes which is probably better represented as a text field (e.g HH:mm). So, to achieve what you are describing you could use the following steps.

  1. Drag and drop two separate date/time fields into your form.

  2. Drag and drop a text field into your form to represent the time difference.

  3. In the data tab of the number field scroll down to the calculated value section and enter in the following JavaScript code. Note that you will need to adapt the code to match the field names for your specific form.

JavaScript
// Create a string representing the duration between two dateTimes in the form HH:mm
function diffTime(endTime, startTime){
    const startDateTime = moment(startTime);
    const endDateTime = moment(endTime);
    const duration = moment.duration(endDateTime.diff(startDateTime));
    // Format the difference as HH:mm
    return `${Math.floor(duration.asHours()).toString().padStart(2, '0')}:${duration.minutes().toString().padStart(2, '0')}`;
}

value = diffTime(data.endDate, data.startDate)


Here is an example of the outcome:


Team Forms Showing time difference calculation in HH:mm format


As for a JavaScript syntax reference I recommend the one below. However, since JavaScript is the most widely use language online you should be able to find additional reference that you may prefer. Chat GPT is also generally pretty good at writing JavaScript.