How to increase day number with every map loop (Moment.js)?

Question

I'm making a simple week calendar in React where I need to display columns with hours. A calendar will be generated onClick and based on the actual week number will show the whole week mon-sun. I'm using Moment.js to manage date.

What I'm trying to do is to increase the day number by 1 with every map loop. Right now I know how to display the right day number for the actual day. But how can I increase it by 1 with every loop? I tried this solution How increment id tag with map function in React . It works on id, but it didn't work with this example.

I display the day number using this code:

{moment(date).format(`DD/MM/YYYY`)}

I'd be glad for any tips or advice. Here is a little glimpse at my code:

const CalendarAdmin = ({openModal}) => {

    const { active, setActive, sorted } = useContext(CalendarContext)

    function addCalendar() {
        setShow(true);
    }

    const [show, setShow] = useState(false);

    const date = new Date();    
    const currentDate = moment(date).format('DD/MM/YYYY');
    const currentWeek = moment(date).format('w');
    const currentDay = moment(date).format('D');

    const renderWeek = () => {
        return (
        <div className="calendar-content">
                <h1>Calendar 1</h1>
                <h1>Okres czasu: 14.11 - 20.11 ({currentWeek})</h1>
                <div className="calendar-days"> 
                    
                    {dayNames.map((item, dayIndex) => 
                        <div className="day-column" >
                            <h2 key={dayIndex}>{item.longName}</h2>
                            <h2>{item.testDate}</h2>
                              
                            {moment(date).format(`DD/MM/YYYY`)}
                                                       
                            {hours.map((hour, hourIndex) => {...

Have you tried adding the loop index times 24 hours in milliseconds to `date`? Would it be possible for you to [edit] the post to include a more complete [mcve]. — Drew Reese, Dec 31 '22 at 07:00
I haven't tried this solution yet, I'll try to use it, thanks. I've also added more complete code, hope that helps. — MarcinB, Dec 31 '22 at 07:07
If you could create a *running* [codesandbox](https://codesandbox.io/) demo that reproduces the issue that we could inspect live that could save us the time of standing up a running example. — Drew Reese, Dec 31 '22 at 07:09

score 2 · Answer 1 · answered Dec 31 '22 at 07:09

2

You can use this add function in moment js as

arrayToMap.map((val,i) => {
  const date = new Date(); 
  return moment(date).add(i, 'd');
})

answered Dec 31 '22 at 07:09

anoop francis

147
1
8

score 2 · Answer 2 · answered Dec 31 '22 at 07:51

Since you want to increase the day on every iteration, you can do something like this.

const currentDate = new Date()

    {
       dayNames.map((item, dayCount) => {
             const newDate = moment(currentDate, "DD-MM-YYYY").add(dayCount,'days');
              return <div>{newDate}</div>
    }

Drew Reese · Accepted Answer · 2023-01-01T18:21:39.933

1

You could use the map index in several ways to increase a DateTime object by a day. The most straightforward method is to use the add method to add units of time (in days) to the current date.

{dayNames.map((item, dayIndex) => 
  <div key={dayIndex} className="day-column" >
    <h2>{item.longName}</h2>
    <h2>{item.testDate}</h2>

    {moment(date).add(i, "day").format(`DD/MM/YYYY`)}

    ...

Another method that would cover most cases you could also add 24 hours in milliseconds (1000 * 60 * 60 * 24) to the current date. This will fail an edge case of a day being less than 24 hours when shifting to DST, if that matters for your use case.

{dayNames.map((item, dayIndex) => 
  <div key={dayIndex} className="day-column" >
    <h2>{item.longName}</h2>
    <h2>{item.testDate}</h2>

    {moment(date.getTime() + i * 1000 * 60 * 60 * 24).format(`DD/MM/YYYY`)}

    ...

Demos:

edited Jan 01 '23 at 18:21

answered Dec 31 '22 at 07:29

Drew Reese

165,259
14
153
181

1

Thank you for taking your time and resolving this problem. It works! – MarcinB Dec 31 '22 at 12:04
Adding 24 hours to a date to increment the day is not a good idea since where daylight saving is observed, not all days are 24 hours long. See [*How can I add 1 day to current date?*](https://stackoverflow.com/questions/9989382/how-can-i-add-1-day-to-current-date) – RobG Jan 01 '23 at 09:45
@RobG Sure, that's a possible edge case once a year where DST is observed. Thanks. – Drew Reese Jan 01 '23 at 18:22
@DrewReese—you *know* that the time is affected for any range that crosses either changeover date, and the date will be wrong for ranges that cross the "out" change without also crossing the "in" change. Writing it off as an "edge case" is not a good idea. – RobG Jan 02 '23 at 19:47
@RobG OP isn't looking at date ranges of such great length to cover going into and out of DST. Adding 24 hours to a "day" that is less than or equal to 24 hours will land in the "next day", while the edge case I speak of is the other one where a "day" is longer and the code is working in the early part of the day when adding 24 hours isn't enough to "push" it to the next "day". IMO that's a bit of an edge case. I appreciate your comments, it makes good points to keep in mind when working with dates in general. – Drew Reese Jan 02 '23 at 20:26
@RobG Are you angling for me to just remove the "add 24 hours" part of my answer? – Drew Reese Jan 02 '23 at 20:27

How to increase day number with every map loop (Moment.js)?

3 Answers3