Real time update of field on page

Help Center Get Answers
1

Hi,
I’ve searched through the Help Centre, but couldn’t find an answer to this. I’m hoping someone will be able to assist me in the help centre.
I have two date fields in a table:

  • Prepay from (field_35)
  • Prepay until (Field_36)

I’d like to be able to show the number of days between these dates in realtime as the customer submits the form. I have a formula field which works, but it doesn’t show in realtime on the page (scene_8 and view_17).

I’ve tried a few javascript snippets I’ve found online, but couldn’t get any of them to work. Can someone please assist with the right coding?

My existing formula field is field_37 and has the formula
round({Prepay until}/86400000-.5,0) - round({Prepay from}/86400000-.5,0)

I also tried with a number field, but I couldn’t get that working either.

Thanks
Luke

2

Hi @Luke1, you’re correct that the equation field doesn’t always auto-update in forms with the more complex formulas.
Here’s a solution that involves a bit of JS code to give you a live date difference:

Requirements:

  • A start date field (field_xx)
  • An end date field (field_yy)
  • A date difference equation field (field_zz) with equation: {Date end} - {Date start}
  • An add or edit form (view_xx) that contains:
    • Your three fields above, where the date difference field has read-only enabled

The form should look something like below:
image

Code:
Insert the following code into your JavaScript section, ensuring you change the relevant view and field keys.
If you’re working with MM/DD/YYYY format, you can keep the code as is, but if you’re working with DD/MM/YYYY, you can change the values where the parseDate() function is being called both times.

$(document).on('knack-view-render.view_xx', function(event, view, record) {

  // Replace with your field keys
  const dateStartField = "field_xx";
  const dateEndField = "field_yy";
  const dateDiffField = "field_zz";

  // Set up the objects
  const dateStartInput = $(`#${view.key}-${dateStartField}`);
  const dateEndInput = $(`#${view.key}-${dateEndField}`);
  const dateDiffInput = $(`#kn-input-${dateDiffField}`).contents()[2];
  

  calcDateDiff(); // Initially calculate the date difference

  // Listen for date start being changed, and run calculation
  dateStartInput.on('change', function() {
    calcDateDiff();
  });

  // Listen for date end being changed, and run calculation
  dateEndInput.on('change', function() {
    calcDateDiff();
  });

  // Calculate the difference between a start and end date
  function calcDateDiff () {
    console.log('it ran')
    dateStart = new Date(parseDate(dateStartInput.val(),'MM/DD/YYYY'));
    dateEnd = new Date(parseDate(dateEndInput.val(),'MM/DD/YYYY'));
    let dateDiff = Math.ceil((dateEnd - dateStart) / (1000 * 3600 * 24));
    dateDiffInput.nodeValue = dateDiff;
  }

  // Parse a date string (either MM/DD/YYYY or DD/MM/YYYY into a date value
  function parseDate(input, format) {
    var parts = input.split('/');
    if (format === 'MM/DD/YYYY') {
      return new Date(parts[2], parts[0] - 1, parts[1]);
    }
    else if (format === 'DD/MM/YYYY') {
      return new Date(parts[2], parts[1] - 1, parts[0]);
    }
    else {
      return Date(input);
    }
  }

});

Code explanation:

  • The code will run when this particular view (view_xx) is rendered
  • The dateDiff() function will run immediately to update the date difference (field_zz) read-only input.
  • The code will also listen for changes made to the start date (field_xx) and end date (field_yy) inputs, and run the dateDiff() function.

Output:
Your solution should look something like below:
live-date-difference

This code would need to be tweaked a little to calculate time difference instead.
Let me know how you go!

1 Like
3

Hi Stephen,
Thank you for the prompt and thorough response. I was able to use the above to implement into our solution.
I appreciate the code and the explanation behind it, which enabled me to add another field to the code as well.
:grinning:
Well done, and thank you.
Luke

1 Like