Vadim Tabakman

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

List Settings

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:

Initial Form

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.

Read Only Date Control

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.

Stored Data Settings

 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.

Calculated Date Settings

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.

Validation

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.

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

Result

Downloads

Form Design: Download Form Design

List Template: Download List Template

Posted by Vadim Tabakman Tuesday, June 25, 2013 9:08:00 AM Categories: Javascript Nintex Nintex Forms
Copyright Vadim Tabakman
Rate this Content 1 Votes

Comments

Wednesday, April 9, 2014 3:03:24 AM
Micael
Gravatar

re: Nintex Forms - Date Calculations with Javascript

Hi Vadim,

I need to filter a listview depending on selected line on another listview, it's possible use javascript for that like you used  for the dates?

Exists another way , if exits would be very usefull.

Cheers , Micael

 

 

 

Sunday, August 3, 2014 5:52:59 PM
Barry Williams
Gravatar

re: Nintex Forms - Date Calculations with Javascript

Hi Vadmin,

The above code is working great, however i'm using it for developing a timesheet and the calculation required is to minus 20days (not add 129 days) what would the code be to minus 20days? (= I've simply changed the + to - and the numbers from 129 to 20 = however it defualts to adding 129 days)

Is there something i'm doing incorrectly? Any help you can offer would be much appreciated as i'm not a Java expert.

Thanking you in advance.

Kind Regards
Barry

Monday, August 4, 2014 12:02:27 AM

re: Nintex Forms - Date Calculations with Javascript

Hi Barry,

what you've done is correct.  Make sure you republish the form.  There shouldn't be anything else you need to add to the JavaScript to take away 20 days.

cheers,

Vadim

Monday, April 20, 2015 9:27:03 AM
Ankita Nahar
Gravatar

re: Nintex Forms - Date Calculations with Javascript

Hi,

 

Great Post.

Can you please help me calculate difference between two dates using the same.

 

Thanks,

Ankita

Tuesday, May 26, 2015 2:33:26 PM
Marian Hatala
Gravatar

re: Nintex Forms - Date Calculations with Javascript

Hello,

 

I need to do sort of similar date checks&calculations but my problem is that my form is being used in multi-regional environment so my input date format vary.

I'm looking for a way how to get/read date from date picker control in a standardized format I could define, of course independently of what's the user's locale/date (visual) format.
Do you know of a way/function how could this be achieved?

 

Marian.

Tuesday, May 26, 2015 3:49:42 PM

re: Nintex Forms - Date Calculations with Javascript

Hi Marian,

that I'm afraid I've never done.  I know the date is an Input html control, so I would recommend you look for that online to see if others have done that.

cheers,

Vadim

Wednesday, June 10, 2015 11:56:08 PM
Ashish Kumar Singh
Gravatar

re: Nintex Forms - Date Calculations with Javascript

Hi Vadmin,

It is a great post.

I am trying calculate the time-elpased when item is created and last modified.

Output: Number of Days, Number of Hours, Number of Minutes

Constraint: Exclude non-working hours, Saturday, Sunday and Holidays.

Could you please look into it.

Thank you in advanche

Thursday, June 11, 2015 10:19:43 AM

re: Nintex Forms - Date Calculations with Javascript

Hi Ashish,

Are you doing this with Nintex Workflow or Forms?

How far have you gotten into getting this to work?  Do you have an error or is the calculation wrong?

cheers,

Vadim

You must sign in to this site to post comments.
Already Registered?
Sign In
Not Yet Registered?
Register





 

Statistics

  • Entries (272)
  • Comments (1769)

Categories