Calculating Time, adding days and hours to find durations and more with Moment
This article explains how to load the moment.js library to make date math easy. Moment.js is a small JS library that makes it easy to parse dates and find durations between dates, do date math and more. In order to use this techniques you will require some basic level Javascript skills.
Loading the Moment.js Library
We need to start by loading the moment.js libary to make some date math functionality available to your form.
- At the top of your form, insert a Free Text heading Element
- Click the Source button in the top left of the editor to switch to Source code view and paste the following code
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment-with-locales.min.js"></script>
- Click Save and then save your form.
The Moment.js library is now loaded.
Working with Time Fields
The Logiforms Time Field can be used to accept a time like "8:30 PM" and is timezone independent. The scripts here can be used with the Time Field to calculate the duration between two Time Fields, set the time based on the current time (local to where the end user is) and calculate an end time when given a starting time and duration.
Converting a Time Field Value to a "Moment" Instance
Before you can start working with a moment object, you need to get the value in the Time Field and convert it to a moment instance. Once you do that you can easily add time, subtract time etc. However the time is incomplete without a date, even if you don't plan to use the date part. In order to create the moment object from a time field, we need to follow these steps:
First, get the value of the Time Field. In this example the field is named "StartTime" and we're using the method form.getFieldByName() to get the field and then getValue() to get the value.
var timeString = form.getFieldByName('StartTime').getValue()
Next, convert it to a moment by prepending a date string to the time, and converting to a moment. Note, if your form had a Date Field or Calendar Field you could also use the value from that field instead of the arbitrary date string used in his example:
var myMoment = moment('01/01/2020 ' + timeString)
We now have a moment object "myMoment" and can call any of the calculations and formatting functions available. For a complete list of options see the moment.js docs.
Calculating the Duration between two Time Fields
In this example, we have two fields, one named "StartTime" and the other named "EndTime". We calculate the time between the two fields on minutes and output it to the field "Output". This code is intended to be attached to an action on BOTH of the time fields, so that it runs whenever there are changes.
- Attach a Custom JS Action to the each Time Field and configure it to run on the change.
- Use the script below on each of the fields
// This function will receive the field and form objects. function(field,form){ // get each fields value var starttimevalue = form.getFieldByName('StartTime').getValue(), endtimevalue = form.getFieldByName('EndTime').getValue(); // ensure both fields have values if (starttimevalue!= '' && endtimevalue!=''){ // create the moment from each fields value var starttimeMoment = moment('01/01/2020 ' + starttimevalue), endtimeMoment = moment('01/01/2020 ' + endtimevalue); // finally, calculate the duration between the two times // https://momentjs.com/docs/#/durations/diffing/ var duration = moment.duration(endtimeMoment.diff(starttimeMoment)) // get the duration as minutes (https://momentjs.com/docs/#/durations/as/) var minutes = duration.as('minutes'); // set the output field form.getFieldByName('Output').setValue(minutes) } }
Calculating Duration
In this example, we have two fields, one named "StartTime" and the other named "EndTime". We will calculate 2 hours from the time entered in the Start Time Field and set the End Time field with the calculated value. In this example we're using a static value for "2 hours" but this could also be pulled from a field on the form.
- Attach a Custom JS Action to the the StartTime field and configure it to run on the change.
- Use the script below on each of the fields
// This function will receive the field and form objects. function(field,form){ // get the starttime value var starttimevalue = form.getFieldByName('StartTime').getValue(); // the time to add in minutes var duration = 120; // ensure the start time is set if (starttimevalue!= '' ){ // create the moment from each fields value var starttimeMoment = moment('01/01/2020 ' + starttimevalue) // Add 120 minutes // https://momentjs.com/docs/#/manipulating/add/ var newtimeMoment = starttimeMoment.add(120,'m'); // Now we have the new time, we need to format it for the TimeField // and set it in the EndTime Field. Moment has tons of different ways to // format a date/time https://momentjs.com/docs/#/displaying/ form.getFieldByName('EndTime').setValue(newtimeMoment.format('h:mm A')) } }
Working with Date Fields and Date and Time Fields
Coming Soon!
0 Comments