Nintex Forms – Date Calculations with Javascript

It’s always fun to work with html controls, jQuery and trying to do some calculations.  If you have encountered a need to do some date calculations or maybe in the future you find this need, hopefully this post will make it a little easier.

The aim here is to have one DatePicker control on our Nintex Form, and when you make a change to it, a second DatePicker gets updated with the original date selected, plus 129 days.

It look a little time as I find that jQuery documentation and examples are not as awesome as I’d like them to be.  But once you get your head around it, you find it actually not that much to get the result we want.

SharePoint List

We start off with a simple SharePoint list with a Date field called “Stored Date”.

When we click on the Nintex Forms button in the ribbon, it will build up the form for us and it’ll look like this:

Now what we are looking for is a 2nd Date control, but this control with be automatically updated.  So we simply drag a Date control onto the form, and in this case, I’ve slighty adjusted the css styles so that the 2nd control has a different background and I’ve also disabled the control because I don’t want users to fill in the date… I want it done automatically.

Configuration for Javascript Usage

We have our controls, but to interact with those controls in Javascript, we take each control ID and store it in a Javascript variable.  This is done in the configuration of each control.

 I usually like to call my ID variables “var”controlname”ID”.  In the above case, varStoredDateID and for the 2nd date control, I call it varCalculatedDateID.

Finally, before we hit the Javascript section, in order for us to update a 2nd Date field, we want to capture the event when the 1st field is updated. To do this, I added a custom validation to the 1st Date control, so that as soon as you change it, some validation javascipt is run.  Part of this validation will be that it will take the current value, add 129 days to it and update a 2nd Date field.

Javascript

To get to the Javascript portion of the form, on the ribbon of the form, click on Settings and you’ll find a Custom Javascript section.  This is where you add your Javascript.

NWF$(document).ready(function()
{
  
});

function validateStoredDate(source, arguments)
{
  var varStoredDate = NWF$('#' + varStoredDateID);
  var varCalculatedDate = NWF$('#' + varCalculatedDateID); 

  // get date from first date picker
  var depart = parseDate(varStoredDate.val(),'mm/dd/yy');

  // add 129 days to the retrieved date
  depart.setDate(depart.getDate() + 129);

  // update second date picker
  varCalculatedDate.datepicker('setDate',depart);
 
  arguments.IsValid = true;
}

function parseDate(dateString, userFormat) {
    var delimiter, theFormat, theDate, month, date, year;
    // Set default format if userFormat is not provided
    userFormat = userFormat || 'yyyy-mm-dd';

    // Find custom delimiter by excluding
    // month, day and year characters
    delimiter = /[^dmy]/.exec(userFormat)[0];

    // Create an array with month, day and year
    // so we know the format order by index
    theFormat = userFormat.split(delimiter);

    //Create an array of dateString.
    theDate = dateString.split(delimiter);
    for (var i = 0, len = theDate.length; i < len; i++){
      //assigning values for date, month and year based on theFormat array.
      if (/d/.test(theFormat[i])){
        date = theDate[i];
      }
      else if (/m/.test(theFormat[i])){
        month = parseInt(theDate[i], 10) - 1;
      }
      else if (/y/.test(theFormat[i])){
        year = theDate[i];
      }
    }
    return (new Date(year, month, date));
} 

I’ve left the “ready” function in the Javascript, because later on, it’d be nice to put in some Javascript to handle the case of opening a form where the 1st field already contains a field, and auto populating the 2nd field.

The end result, is that when you select a date, the other date field is updated as seen below :

Downloads

Form Design: Download Form Design

List Template: Download List Template