Manipulating dates momentjs in react/javascript

Question

Auto-filling other date-fields based one the first one.

1. I have array of 12 indexes "listOfPaysIndexes", I am using this array to iterate through her and render 12 DateInput fields.

2. You can click on each of this fields and pick Date.

3. When you pick date in first DateInput all the others DateInputs should be auto-filled with the next month.

Current behaviour is: that when you pick firstDate you get same Date on all other fields.

Expected behaviour is: that when you pick firstDate every next filed get the next mounth date auto-fielled.

Problem is when I choose 6 November 2018 I get in first field 6 Nov, and in the all others fields I get 6 December 2018.
But there should continue switching to the next mounths and displying next months dates.
I think this line of code is problem: return firstDate.add(1, 'months').format('MM/DD/YYYY')

Code sample:

fillingDatesArray = (data, values, periodType, periodLength) => {
  let listOfPaysIndexes = []
  listOfPaysIndexes = This array have 12 indexes

if (periodType === 'monthly') {
  values.ending_period_monthly = listOfPaysIndexes.map(value => {
    let firstDate = new Date(data.value)
    return firstDate.add(1, 'months').format('MM/DD/YYYY')
  })
}

Here is screenshot of that DateInputs:

@Liam Problem is cus if I choose 6 November 2018, I get in first field 6 Nov, and in the all others fields I get 6 December 2018. But there should continue switching to the next mounths. this line of code is problem: return firstDate.add(1, 'months').format('MM/DD/YYYY') — James Delaney
– James Delaney, Commented Nov 16, 2018 at 14:13
this problem is combination of react DOM, event listener, event handler. You only posted event handler. can you post snippet for react DOM and event listener? — Nikko Khresna
– Nikko Khresna, Commented Nov 16, 2018 at 14:17

Akrion · Accepted Answer · 2018-11-16 17:16:14Z

1

Try cloning your moment date in the map so each value is not the same reference to the same moment object:

let firstDate = moment(data.value)
...
return firstDate.clone().add(1, 'months').format('MM/DD/YYYY')

instead of:

return firstDate.add(1, 'months').format('MM/DD/YYYY')

answered Nov 16, 2018 at 17:16

Akrion

18.6k1 gold badge38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Manipulating dates momentjs in react/javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related