Skip to main content

How To: Default a Date Field Value Based on Another Date Field

NOTE: THIS POST IS AN UPDATED VERSION OF THIS POST

When working on treatment plans in myEvolv, you will notice that many of the treatment plan component forms contain both a start date and a target completion date.  One of the programs I was building a treatment plan for wanted to have the target completion date on the form but always wanted it to be 90 days from the start date.  Instead of making each clinician calculate 90 days from the start date and fill it in themselves, I used this method to take the date value from the start date and update the target completion date field with a value that is 90 days later.  I will walk you through the JavaScript that I used so that you can make adjustments based on your needs.  The full snippet of JavaScript will be at the end.

two-fields

Where does the code go?

The first consideration is where to put the JavaScript.  In this case, used the ‘On Change Script’ field property on the field that will be modified by the clinician, ‘start_date’.  myEvolv provides us with access to 3 events that we can use to trigger our JavaScript handlers (the code we want to execute):  ‘On Change’, ‘On Click’ and ‘On Load’.  The ‘On Change’ event is fired when the value of the field has been changed.  This is the most suitable event to use in this situation since I do not want the new date value to calculate until there is a value in the first date field.  Furthermore, if a clinician makes a mistake entering the start date, I want the new date to recalculate when the clinician makes an adjustment.  Both of these scenarios are covered when using the ‘On Change’ event.

Get the ‘start_date’

The first line of JavaScript code’s purpose is to get the value that has been placed into the ‘start_date’ field and convert it into a proper JavaScript Date object so that we can manipulate the date easily. I declared a variable named date and set it to be a new Date object passing the value of the ‘start_date’ field as its argument:

var date = new Date(getFormElement('start_date'));

Calculate the ‘target_date’

Now with the date entered by the clinician converted to a Date object, I can perform some calculations on the date using the ‘getter’ and ‘setter’ methods built in to JavaScript Date objects. In my scenario, I need the ‘target_date’ field to be +90 days from the ‘start_date’ so I used the getDate() and setDate() methods:

date.setDate(date.getDate() + 90);

If I wanted to do +3 months instead, I would use the getMonth() and setMonth() methods:

date.setMonth(date.getMonth() + 3);

If I wanted to do +1 year, I would use the getFullYear() and setFullYear() methods:

date.setFullYear(date.getFullYear() + 1);

There are also methods for getting and setting hours, minutes, seconds, and milliseconds, but I am dealing with Date Only fields in this scenario.

Format the ‘target_date’

Now that the date object has my new date stored in it, I need to put that value into the ‘target_date’ field. However, the date in the date object is not formatted in a way that myEvolv’s date fields like so I need to pull the individual date elements from the object and build a string value to place in the date field. I accomplish this first by declaring variables for the month, day and year:

var mm = date.getMonth() + 1;//+1 is needed because in JavaScript Date objects, January is 0
var dd = date.getDate();
var yyyy = date.getFullYear();

Now I declare a new variable called formatted_date and set its value to a concatenated myEvolv-friendly string:

var formatted_date = mm + '/' + dd + '/' + yyyy;

Set the ‘target_date’

setFormElement(‘target_date’, formatted_date);

 

One Caveat

You may be inclined to disable the ‘target_date’ form field so that clinicians cannot change the value after it has been calculated. I was unable to get that to work, however. When a form field is disabled, it is excluded from being saved so for now it would seem that you have to keep the form field modifiable. If you used this same similar* code in the ‘On Change Script’ property for ‘target_date’, you could prevent the ‘target_date’ from being changed by effectively reverting any attempts at changing the ‘target_date’ manually.

*You will need to also add some JavaScript to validate that the ‘target_date’ has been changed because if you just put this exact same code in the ‘On Change Script’ property for ‘target_date’, you will end up in an infinite loop when ‘actual_date’ is changed on the form and you will crash the browser.

The Full Code

var date = new Date(getFormElement('start_date'));
date.setDate(date.getDate() + 90);
var mm = date.getMonth() + 1;
var dd = date.getDate();
var yyyy = date.getFullYear();
var formatted_date = mm + '/' + dd + '/' +yyyy;
setFormElement('target_date', formatted_date);

Dean

Dean is a System Administrator at The House of the Good Shepherd in Utica, NY. He has been working with the myEvolv application since 2013.

2 thoughts to “How To: Default a Date Field Value Based on Another Date Field”

  1. Hey Corbin!
    I was working with Perry and recently set this up on quite a few forms we have. I added expiration_date field and this calculates 135 days (it counts the date entered which is why I have it calculate 134 days) but I think this may also work for the target_date field. I needed the expiration_date to be non-modifiable so I added the following script, without this script once the form was saved it would remove the expiration date.
    var node =
    formXML.documentElement.selectSingleNode("form_group/form_item [@column_name = ‘expiration_date’]");
    node.setAttribute(‘modified’, ‘true’);

    Here is the full script. I put this in the On Change Script on the Actual_date field. One thing to note I did have to remove todayDate() from the default value AND I do not know if this will work or not for XB we are only using classic and I haven’t begun testing XB. Maybe someone knows how to make the two work together, but for this script you need to click on the date field to populate the expiration date.

    var mydate = new Date(getFormElement(‘actual_date’));
    mydate.setDate(mydate.getDate() + 134);
    var mm = mydate.getMonth() + 1;
    var dd = mydate.getDate();
    var yyyy = mydate.getFullYear();
    var formatted_date = mm + ‘/’ + dd + ‘/’ +yyyy;
    setFormElement(‘expiration_date’, formatted_date);
    setElementFromXML(formXML, ‘expiration_date’, formatted_date);

    var node =
    formXML.documentElement.selectSingleNode("form_group/form_item [@column_name = ‘expiration_date’]");
    node.setAttribute(‘modified’, ‘true’);

Leave a Reply

Your email address will not be published. Required fields are marked *

We are using cookies on our website

Please confirm, if you accept our tracking cookies. You can also decline the tracking, so you can continue to visit our website without any data sent to third party services.