Populate Text Fields with Next Several Months Based on a Selected Date

[#1]

I have been browsing and browsing trying to find the best way to populate 12 months based on the Date selected. I have found a few samples of code but have not been able to get them to work. Need it to display as just the short version of the month (Mar for March, etc) in the Red Boxes under each Green Header.

***When the date text field is selected, in this sample, it needs to populate March (as the first month), then continue April as Month 2, May as Month 3, etc.

I have attempted using the Num2Date with the Date2Num such as Num2Date((Date2Num($.formattedValue, "MM/DD/YYYY") + 30), "MMM"), but can't seem to get it to work right. If I try to add 30 days to the date "03/01/2020" (if this date is selected) it just goes to March 31. 

What is the best way to set this up? Help! 🙂 Thank you!

Here is the form on my OneDrive:
https://1drv.ms/b/s!AruQL7tdRiTsnhTEJj81ZvdKD58l?e=wQZyU4

[BGreggs4 · Accepted solution]

Here's a FormCalc script that will populate the months names beginning from the current one. Put it inot the exit event of the date field.

var oCells = Ref(Table.HeaderRow2.resolveNodes("#field[*]")) 
var nDate = Date2Num($.formattedValue, "MM/DD/YYYY")
var nMonth = Num2Date(nDate, "M")
var nIndex

for i = 0 upto oCells.length - 1 do
nIndex = 12 - (12 - Mod((i + nMonth) -1, 12))
oCells.item(i) = Num2Date( Date2Num( Concat(nIndex + 1, "/1/1970"), "M/D/YYYY"), "MMM")
endfor

The result looks like this.

Make sure that display pattern for the red fields is changed into date{MMM}!

[BGreggs4 · Accepted solution]

Thank you so much! That helped!! I appreciate it!!!

One quick question, when I "clear" the date field, is there a way to "clear" the red fields? Do I just set the fields to empty strings if the Date field is empty?