Dates not displaying properly.

Ask the community
,
1

Hi all,

This is a kind of complex question. I have the following code:

export function forward_click(event) {
//Add your code for this event here:

    $w('#back2').show();
    $w('#back').hide();
    
    let item = session.getItem("d5");
    let date = new Date(item);
    
    console.log(date);
    console.log(item);
    
    let date1 = date;
    let date2 = new Date();
    let date3 = new Date();
    let date4 = new Date();
    let date5 = new Date();
    let date6 = new Date();
    
    date2.setDate(date1.getDate() + 1);
    date3.setDate(date1.getDate() + 2);
    date4.setDate(date1.getDate() + 3);
    date5.setDate(date1.getDate() + 4);
    date6.setDate(date1.getDate() + 5);
    
    console.log(date6);
    
    const options = { month: 'short', day: 'numeric' };
    
    let d1 = date1.toLocaleDateString('en-US', options)
    let d2 = date2.toLocaleDateString('en-US', options)
    let d3 = date3.toLocaleDateString('en-US', options)
    let d4 = date4.toLocaleDateString('en-US', options)
    let d5 = date5.toLocaleDateString('en-US', options)
    
    console.log(d1);
    console.log(d2);
    console.log(d3);
    console.log(d4);
    console.log(d5);
    
    $w('#d1').text = d1;
    $w('#d2').text = d2;
    $w('#d3').text = d3;
    $w('#d4').text = d4;
    $w('#d5').text = d5;

    session.setItem("d1", date1);
    session.setItem("d5", date6);

    $w('#back2').show();
    $w('#back').hide();

}

The code works flawlessly with one crucial issue. When the month changes, some of the dates will start to display from the previous month rather than the next month.

For example if session.getItem(“d5”) is Jan 22, the dates will display Jan 23, Jan 24, Jan 25, Jan 26, Jan 27. Clicking again will yield, Jan 28, Jan 29, Jan 30, Jan 31, Feb 1. But clicking a third time will display Feb 2, Jan 3, Jan 4, Jan 5, Jan 6.

Makes no sense to me at all. I tested with other months and it is always the same. The click after the month change causes the first one to be correct and the other four to be the correct day but incorrect month.

Any help would be awesome!

2

I have checked your code and could see that you are using text elements to represent the date. As such you need helper functions to help you work with time. Please refer to step 14 in this article to learn how to work with time functions.

Good luck!