📅 Calculate Balance Days in Joget Forms with JavaScript

1. Overview

This article shows how to calculate leave or balance days inside a Joget form using JavaScript. The script reads date fields, calculates the number of selected days, validates against available balance, and updates the remaining balance field.

2. How It Works

• Make the calculated field read-only.
• Listen for changes on start_date, end_date, request_type, and total_days.
• Calculate days between the selected dates.
• Compare requested days against the available balance.
• Clear invalid input when the user exceeds the balance.

3. Where to Use in Joget

• Form Builder: custom HTML element or form-level JavaScript.
• Userview: forms where users submit leave or allocation requests.
• Workflow Builder: request forms before approval routing begins.

4. Full Code

<script type="text/javascript">
$(document).ready( function(){

    $('[name=requested_days]').prop("readonly", true);

    //Calculate days taken
    $('[name$=end_date]').change(function() {

        var myDate1=$('[name$=start_date]').val();
        var myDate2=$('[name$=end_date]').val();
        var myDaysTaken = new Date(Date.parse(myDate2) - Date.parse(myDate1));
        myDaysTaken = (myDaysTaken/1000/60/60/24)+1;
        $('[name$=requested_days]').val(myDaysTaken);

        //Check if sufficient leave balance
        var myLeaveBal = $('[name$=available_days]').val();
        if (myLeaveBal < myDaysTaken) {
            alert("You don't have enough leave balance to apply "+myDaysTaken+" days!");
            $('[name$=end_date]').val('');
            $('[name$=requested_days]').val('');
            $('[name$=end_date]').focus();
            document.getElementById("total_leave_days").style.display = "none";
            document.getElementById("EntitlesDays").style.display = "none";
        }
    });

    function calculatebalance_days(totalDays) {
      var balanceDays = totalDays == '' || totalDays == null ?
        parseInt($('[name=total_leave_days]').val()) - parseInt($('#requested_days').val()) : 
        parseInt(totalDays) - parseInt($('#requested_days').val()) ;
      $('#balance_days').val(balanceDays);
    }

    $('[name=end_date],[name=start_date],[name=request_type]').on('change click', function () {
      calculatebalance_days($('[name=total_days]').val());
    });

  $('[name=total_days]').change(function () {
    var totalDays = $(this).val();

    console.log("totalDays: ",totalDays)
    calculatebalance_days(totalDays);
  })
});
</script>

5. Example Use Cases

• Leave request forms.
• Training day allocation.
• Project resource day planning.
• Any form that needs date-range balance validation.

6. Customization Tips

• Rename field IDs and names to match your Joget form fields.
• Add weekend or holiday exclusion if your policy needs business-day calculation.
• Replace alert messages with Joget validation messages for a smoother user experience.
• Test the script with empty dates, same-day dates, and invalid ranges.

7. Key Benefits

• Gives instant feedback to users.
• Reduces invalid workflow submissions.
• Keeps balance calculation visible in the form.
• Avoids server-side checks for simple date math.

8. Security Note

Client-side validation improves usability, but important business rules should also be validated on the server side before final approval or database update.

9. Final Thoughts

This is a simple but effective Joget form enhancement. Use JavaScript for fast user feedback, and pair it with server-side validation when the balance rule affects approvals or payroll-sensitive data.