Real time update of field on page

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.


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:


  • 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:

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() {

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

  // 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.

Your solution should look something like below:

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

1 Like

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.
Well done, and thank you.

1 Like