如何在 reactjs 的下拉列表中添加日期列表

Question

I am trying to display list of all month in a dropdown so that user will be able to filter data accordingly. I am using momentjs I have added the list of date but the problem is i want to display this something like this. Here in the circled one i want to display the next month. I don't know how to do that. Any help would be great.

This is my code

let dateDisplay = [];
    for (let i = 0; i <= 12; i++) {
        const date = moment().add(i, 'month').calendar();

        dateDisplay.push(date);
    }
    console.log('invoiceDt', dateDisplay);
<MenuItem>
                    <em>Select Date</em>
                  </MenuItem>
                    {dateDisplay.map((item, index) =>{
                        console.log('invItem', item);
                            return <MenuItem value="SYSTEM">{`${item} ~ ${item} `}</MenuItem>
                        }
                     )}


                </Select>

Answer 1

Use the format method:

const date1 = moment().add(i, 'month').format('MM/DD/YYYY');
const date2 = moment().add(i + 1, 'month').format('MM/DD/YYYY');

dateDisplay.push([date1, date2])

Later:

return <MenuItem value="SYSTEM">{`${item[0]} ~ ${item[1]} `}</MenuItem>

Answer 2

you can do is something like below: use loop to make you html and then render.

let dateDisplay = [];
    for (let i = 0; i <= 12; i++) {
        const date = moment().add(i, 'month').calendar();

        dateDisplay.push(date);
    }
    console.log('invoiceDt', dateDisplay);

After this make you desired html like

const items = []
for(var i = 0 ; i < dateDisplay.length - 1; i ++){
items.push(<MenuItem value="SYSTEM">{`${dateDisplay[i]} ~ ${dateDisplay[i+1]} `}</MenuItem>)
}

and then

 return (
    <div>
      {items}
    </div>
  )