​​​How to get number of hours and minutes between two times?

Last Update: December 18, 2017

Here are the steps on how to return number of hours, minutes between two times in the following format hh:mm:

  1. Open the form in design mode.
  2. Add a two Times controls to the form design workspace and set its ID property to Time1 and Time2 respectively.
  3. Add TextBox control to the form design workspace and set its ID property to TextBox1.
  4. Select the Time1 control.
  5. In the Rules pane, click on the Add icon to add a new rule, the Rule Manager dialog will open.
    How to auto-shifting Panel control in a form2.jpg
  6. Add a new rule as follows:
    A. Change the Rule Name as desired.
    B. Change the Rule Type to Action.
    C. Change the Event Type to onChange. Leave "Execute if event triggered only on this control" unchecked.
    D. In the Condition section, type the following:
    Time1 != '' && Time2 != ''
    E. In the Action section, type the following script:
        var day = '1/1/1970 '; //1st January 1970
        var start = $('#Time1').val(); //eg "11:40"
        var end = $('#Time2').val(); //eg "17:00"
       //returns an integer of hours between the 2 times
       var diff_in_hour = parseInt((Date.parse(day + end) - Date.parse(day + start)    ) / 1000 / 60 / 60);
       //returns minutes between the 2 times
       var diff_in_min = ( Date.parse(day + end) - Date.parse(day + start) ) / 1000    / 60;
       //return the total minutes minus integer hours
       var remaining_minutes = (diff_in_min - (diff_in_hour * 60));
       setValue(TextBox1,diff_in_hour + ':' + remaining_minutes)

    F. Click on the Save button to save the rule.
    Note: You can use Assistance Panel to help you adding functions and related parameters, form variables and form controls to Conditions and/or Actions sections.
  7. Test the form by clicking on the Preview button in the View Group.