jQuery to Autofill Dates and Increment Annually

My idea of Friday afternoon fun was learning some date functions! In my last post I went over how to take the value of the total amount entered in a field and split it into even installments of related fields based on the number of years in another field and a button push. (Ex: Enter $300,000 in field A, enter 3 years into field B, then push a button, update field C, D, and E with $100,000 each). That was pretty neat! I learned .val and how to use arrays.

Now, Friday my goal was to figure out how to auto-fill 3 more fields with dates based on the start date and number of years fields. For example, a user enters a start date of 1/1/2017 and 3 years… I then wanted the three date fields next to the amounts to auto-fill with 1/1/2017, 1/1/2018, and 1/1/2019. Easy, right? Not quite. When I first tried I didn’t realize that simply adding “1” would basically result in 1/1/20171, 1/1/20182, 1/1/20193. Not exactly what I want. Because I wasn’t treating my field as a date, I was just adding 1 as a string to the end of my value.

Here’s what I ended up with:

Screen Shot 2017-05-08 at 7.14.16 PM.png

A couple things I had to learn:

1.Declaring my date field variable as a Date: var myDate = new Date(input);

I had to set my date field as a value that I could do a calculation on in ms.

2. Doing a calculation on dates: myDate.setFullYear(myDate.getFullYear() + 1);

myDate.setFullYear() sets the year of my date. So I’m saying, take my field “myDate”, then set the Year. What should the Year be? That which is in the parenthesis! Another Date function. Take myDate and get the full year then add 1. So, in essence I am saying I want to set the year of myDate… what do I set it to? myDate’s year +1. Awesome! Now how to throw that into my fields within my array?

3. Well, I actually had my first date be auto-filled to equal the start date. So I can skip field i=0. Then, I only needed the array to auto-fill the other date fields.

So I started my array at 1 rather than 0 like in my last post. So the jQuery will only fill my fields starting with gm_grantapp_ar_invoice_due_date1 … through the number of years value.

4. Learn some jQuery: ($.datepicker.formatDate(‘dd/mm/yy’, myDate));

This statement says the value of the gm_grantapp_ar_invoice_due_date[i] field should be the value of myDate that I calculated in #3 above, then format it.

A final note, if you’re learning these as you read along: here’s a helpful note on syntax of jQuery. It follows the format: $(field).action(value)

  • Meaning … what field (HTML) am I editing is declared first. (after $ which calls the jQuery library).
  • Then, a period.
  • Then, what function/action am I using (getYear, setYear, val()).
  • Finally, what the value of the field should be is in parenthesis.

Easy, right?! Keep tuning in for more fun javascript/jQuery!

On a separate note, I learned how to use Process Builder in SalesForce today and have a practical use-case for it so if you like my mixed bag of topics keep your eyes open for an upcoming post on that!



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s