September always seems to throw my Date list off course, skipping a month and causing it to vanish without a trace

The issue at hand

I have been working on developing an Open-Source Vue Application that features a Gantt Chart for visualizing tasks along a timeline. Users are able to customize the date range, with the default setting to display the current and upcoming month.

However, every September, there seems to be a recurring problem with the chart malfunctioning. Instead of displaying all months as intended, it skips the next month:

https://i.sstatic.net/xiCyS.png

This is how the correct output should look: https://i.sstatic.net/9uOEM.png

An ongoing discussion regarding this issue can be found here.

The challenge

Despite my best efforts, I have been unable to replicate this error. Even after utilizing Browserstack to mimic the exact browser and operating system configurations used by my users, the chart functions perfectly across all devices and browsers I've tested. The inability to reproduce the issue has hindered my ability to debug and resolve it.

This suggests that the problem may only impact specific users and not a significant portion of them.

The code snippet

The following code pertains to the creation of the data structure encompassing years, months, and days:

// Layout: years => [months => [days]]
let years = {}
for (
    let d = this.startDate;
    d <= this.endDate;
    d.setDate(d.getDate() + 1)
) {
    let date = new Date(d)
    if (years[date.getFullYear() + ''] === undefined) {
        years[date.getFullYear() + ''] = {}
    }
    if (
        years[date.getFullYear() + ''][date.getMonth() + ''] ===
        undefined
    ) {
        years[date.getFullYear() + ''][date.getMonth() + ''] = []
    }
    years[date.getFullYear() + ''][date.getMonth() + ''].push(date)
    this.fullWidth += this.dayWidth
}
this.$set(this, 'days', years) // I know, that variable name doesn't make any sense

This data is then presented to the user in the following manner:

<template v-for="(y, yk) in days">
    <div :key="yk + 'year'" class="months">
        <div
            :key="mk + 'month'"
            class="month"
            v-for="(m, mk) in days[yk]"
        >
            {{
                new Date(
                    new Date(yk).setMonth(mk),
                ).toLocaleString('en-us', {month: 'long'})
            }},
            {{ new Date(yk).getFullYear() }}
            <div class="days">
                <div
                    :class="{ today: d.toDateString() === now.toDateString() }"
                    :key="dk + 'day'"
                    :style="{ width: dayWidth + 'px' }"
                    class="day"
                    v-for="(d, dk) in days[yk][mk]"
                >
                    <span class="theday" v-if="dayWidth > 25">
                        {{ d.getDate() }}
                    </span>
                    <span class="weekday" v-if="dayWidth > 25">
                        {{ d.toLocaleString('en-us', {weekday: 'short'}) }} 
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

You can access the complete component code here.

Answer №1

An error arises when trying to adjust the month using the code:

new Date(new Date(yk).setMonth(mk))

It may seem logical that

new Date(new Date(2021, 11, 31).setMonth(8))
would result in the end of September 2021. However, this is not the case. Due to September only having 30 days, the adjusted date will actually be October 1st.

In order for the month adjustment to work accurately, the variable yk should represent the first day of each month.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can a class be attached to an element depending on a boolean condition?

Is there a way to bind a class to an element based on the result of a boolean expression in Vue.js? Here's an example of what I'm trying to achieve: <input type="email" :class="{ invalid: submitted && $v.email.$error }"> However, ...

"Standard" approach for a Date instance

During my time in the Node REPL environment, the following output was displayed: > console.log(new Date()) 2023-08-15T09:21:45.762Z undefined > console.log(new Date().toString()) Sun Aug 15 2023 09:21:50 GMT+0000 (Coordinated Universal Time) undefine ...

What is the most effective way to incorporate the DOMContentloaded event listener into the document using nextJS?

I am working on integrating an HTML code snippet into my Next.js project. The snippet includes an external script with a createButton function. <div id="examplebtn"></div> <script type="text/javascript"> //<![ ...

Return to the main page by clicking on the link #id

I am in the process of creating a personalized Wordpress theme that consists of one main page with 8 additional sub-pages. I am wondering how I can navigate to a specific section using an ID (for example, <a href="#how">how</a>) from the sub-pa ...

Issue with ng-repeat not being filtered

Utilizing Salvattore (a masonry-like grid) within my Angular application, but encountering issues with the filter option in ng-repeat. It seems that Salvattore encapsulates each repeated item in an individual div to structure the grid (in this case, div.co ...

Substitute content in HTML using jQuery along with JavaScript functionalities

[UPDATE: I've condensed the relevant excerpt from my code. I acknowledge this may have caused some confusion. My apologies for any misunderstanding. Here's a snippet that reproduces the issue: After the snippet loads, click on the button. < ...

Showing JSON information on a web browser

Here is a snippet of JSON data that I am working with: {"earthquakes":[{"datetime":"2011-03-11 04:46:23","depth":24.39999999999999857891452847979962825775146484375,"lng":142.36899999999999977262632455676794 ...

Preserving scroll location following a hyperlink postback situation

I've explored numerous strategies to tackle my issue, but none have proven successful. My task involves toggling user activation and deactivation through an asp.net hyperlink. The main problem arises when this action triggers a postback, causing the p ...

JQuery functions are functioning properly in Internet Explorer 10, but are encountering issues in Internet Explorer

My JavaScript function calls a jQuery function that works in IE10 but not in IE7. function test() { // Display message before calling jQuery function... alert("Before"); // Call the jQuery function... $("#boxscroll").getNiceScroll().resize(); // Display m ...

Calling a function after a value has been updated

Does anyone have any suggestions for how to create a Logout button that unsets sessions and then closes the current tab? I've been able to destroy the sessions, but I'm struggling with closing the tab. I've tried using setInterval and echoin ...

Learn the process of dynamically adding components with data to a list of objects using React JS

In my current project, I am working with a component list that consists of MUI chips. These chips have specific props such as 'label' and 'callback', which I need to incorporate into the list when an onClick event occurs. Each chip shou ...

The functionality of Nodejs exec is malfunctioning

I need assistance with executing DOS commands using the exec function: java -jar D:\selenium\selenium-server-standalone-2.40.0.jar -htmlSuite "*firefox3 C:\Users\AppData\Local\Mozilla Firefox\firefox.exe" "http://google. ...

AngularJS Large file size

After successfully building the 5 MIN QUICKSTART app, I decided to minify it with webpack following the recommendations in the angularJS docs. To my surprise, the size of the minified AngularJS file turned out to be approximately 700 KB, which is significa ...

Leveraging various techniques within a single controller in AngularJS

I am seeking assistance and advice on a coding issue I am facing. I am attempting to use two methods in one controller. The first method is to display selected rooms, while the second method is to display selected pax. However, only the first method seems ...

An error message stating "ReferenceError: str is not defined" was encountered in Firefox while using the Gettext Library

The gettext.js library seems to be giving me trouble. When I try to run the "index.html" file, an error message saying "ReferenceError: str is not defined" pops up. this.LCmessages[lang] = new jsGettext.Parse(str); I'm not sure where the str variabl ...

Creating a modal component in VueJs integrated with Laravel

I am looking for assistance in implementing a VueJS modal component to remove something using a Laravel route. In my constructor, I have the destroy method but I need help on how to proceed with this. Can someone please guide me? Here is the code for my m ...

`Optimizing Django by using multiple room relationships to save formset related models`

I need help with saving a formset that involves two models in a many-to-many relationship. When I open the page, two forms are displayed but after filling them out and clicking "Add", the fields for "phone" and "client_name" get cleared and the form is not ...

Display user profile pictures from Vue.js in the Laravel public directory

I have been working on implementing a commenting system and recently incorporated vue.js into my laravel project. One of the features I want to include in my comment area is displaying user profile images from the laravel public folder. However, I am u ...

Removing nested objects from an array in VueDeleting a nested object from

On a quest to remove nested objects from an array with the help of an Ajax request, I stumbled upon a similar example in my research. You can check it out here: Vue.js Remove a Nested Object from Array. My situation is slightly more intricate as I am atte ...

What is the best way to access a variable's value from outside a promise?

I encountered an issue while trying to assign a value to a variable outside of a promise. Despite defining the variable outside the promise, it is showing up as undefined when I check its value. Could someone assist me with this problem by reviewing my co ...