If you want to add years instead of months, change .addMonths(item.index-1) to .addYears(item.index-1). This will add one year to each row, instead of one month to each row. So instead of 12 months, you’d get 12 years, one year per row.
To do something different on every Nth row, add a second case to your OnitemLoad event. It will look something like:
OnitemLoad
If value [[item.index % 12]] equals 0
Do new formula
In that new formula you could use (item.index / 12) to determine if it’s the first 12th row, the 24th row, or the 36th. For example on the 24th row (item.index / 12) would be equal to 2 (second year). So you can use that as necessary in your formula. Or if you mean you want a different formula for ranges of years, use a two conditions on your case like:
If value [[item.index]] is greater than 12 AND value [[item.index]] is less than or equal to 24
Lastly, I think I have a solution to the OnTextChange issue. It appears it’s an Axure issue because in both FireFox and Chrome, the input event correctly fires when changing the value of the datepicker. So you can put this in an Open Link (external URL) action on the OnPageLoad event:
javascript:document.querySelector('[data-label=date] input').addEventListener('input',e=>{var d = e.target.value;$axure.setGlobalVariable('date_input',[d.substr(5,2),d.substr(8,2),d.substr(0,4)].join('/'))})
Next name your datepicker widget, then look through the above code and find where it says [data-label=date] and change it to [data-label=newName], using the name you chose for your widget. Next find where it says 'date_input' and change it to 'variableName' using the global variable you made for the date. Be careful that you preserve the quotes and don’t accidentally add or delete one.