Join the Team Forms community

Updated 4 months ago

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

At a glance
The community member is trying to calculate the difference between two date/time fields, but the value only shows the hours and not the minutes. The community member reached out to support, who said they would need to use JavaScript, which the community member does not know. A community member provided a solution using JavaScript to calculate the time difference and display it in the format "HH:mm". The community member also suggested using a text field instead of a number field to better represent the time difference.

The solution involves using the following JavaScript code:

function diffTime(endTime, startTime){ const startDateTime = moment(startTime); const endDateTime = moment(endTime); const duration = moment.duration(endDateTime.diff(startDateTime)); return `${Math.floor(duration.asHours()).toString().padStart(2, '0')}:${duration.minutes().toString().padStart(2, '0')}`; } value = diffTime(data.endDate, data.startDate)

The community member also recommended a JavaScript syntax reference and mentioned that ChatGPT can be helpful for writing JavaScript.

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.

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

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.