JavaScript Calendar lacks two days

Question

JavaScript Calendar lacks two days

I'm currently developing a custom calendar application using Javascript with Vue JS. One of the methods I've created is for getting the number of days in a specific month:

daysInYearMonth(y,m){
  return new Date(y, m, 0).getDate()
}

When I log the result of this method for July, I correctly get 31 days. However, when I try to use this value in my calendar:

this.days = [...Array(this.daysInYearMonth(this.year, 
  this.month)).keys()]
}

Surprisingly, the console logs only 29 days, which is two days short. Simply adding those two days messes up the other months. You can view my code on CodePen.

Just a heads up, my team has opted not to use Moment.js and instead focus on Vue and plain JavaScript, which presents its own set of challenges.

javascript vue.js vuejs2

Answer 1

Answer №1

daysInYearMonth() calculates the number of days in the previous month instead of the current one. This is because using day 0 in a date signifies the last day of the month prior to it. Hence, for July, you will get 30 instead of 31. To obtain the last day of the current month, you should consider the next month.

daysInYearMonth(y,m){
  return new Date(y, m+1, 0).getDate()
}

Another issue arises from the fact that array indices start at 0, while days in a month start at 1. Consequently, using

Array(this.daysInYearMonth(this.year, this.month)).keys()

yields an array from 0 to 30 rather than from 1 to 31. The solution is to implement a loop that begins at 1, instead of manipulating arrays.

let lastday = this.daysInYearMonth(this.year, this.month);
this.days = [];
for (let d = 1; d <= lastday; d++) {
    this.days.push(d);
}

Answer 2

daysInYearMonth() calculates the number of days in the previous month instead of the current one. This is because using day 0 in a date signifies the last day of the month prior to it. Hence, for July, you will get 30 instead of 31. To obtain the last day of the current month, you should consider the next month.

daysInYearMonth(y,m){
  return new Date(y, m+1, 0).getDate()
}

Another issue arises from the fact that array indices start at 0, while days in a month start at 1. Consequently, using

Array(this.daysInYearMonth(this.year, this.month)).keys()

yields an array from 0 to 30 rather than from 1 to 31. The solution is to implement a loop that begins at 1, instead of manipulating arrays.

let lastday = this.daysInYearMonth(this.year, this.month);
this.days = [];
for (let d = 1; d <= lastday; d++) {
    this.days.push(d);
}

Answer 3

Answer №2

Let's start with the first point:

Instead of using

return new Date(y, m, 0).getDate()

, consider using m + 1, as 0 represents the last day of the previous month. For more information, refer to this resource.

Moving on to the next point:

Remember that this.days starts from zero, but the actual days in a month are not zero-based. Therefore, your count should range from 0 to 30 rather than 1 to 31.

I trust this explanation clarifies things for you. Regards

Answer 4

Let's start with the first point:

Instead of using

return new Date(y, m, 0).getDate()

, consider using m + 1, as 0 represents the last day of the previous month. For more information, refer to this resource.

Moving on to the next point:

Remember that this.days starts from zero, but the actual days in a month are not zero-based. Therefore, your count should range from 0 to 30 rather than 1 to 31.

I trust this explanation clarifies things for you. Regards

JavaScript Calendar lacks two days

Answer №1

Answer №2

Similar questions

How to search for a value in Firebase database and save it to an HTML table?

Tips for sending event and additional arguments to a click handler

Angular 2, React, or any other modern framework.getList()?.map

Delayed Page Update: Click Event Doesn't Execute Correctly Without JQuery

Unexpected behavior encountered when running Angular 8 radio button checked function

What is the best way to insert a variable into a nested component in Vue.js?

The nuSelectable plugin enhances the functionality of jQuery

Incorporate text onto an image using Semantic UI

Issue encountered while loading JSON data into DynamoDB's local instance

The typescript error TS2339 is triggered by the property 'webkitURL' not being found on the 'Window' type

The counter unexpectedly increments by 2 instead of 1

Infinite dice roller for a six-sided die

Is it feasible to activate a Bootstrap Tooltip from a different element?

A URL that quickly updates live content from a backend script

Steps for generating instances of an HTML page and dynamically adding them to a list on the main page

Combining numerous base64 decoded PDF files into a single PDF document with the help of ReactJS

Displaying VueJS property inside an array of HTML elements

Displaying a list of data separately in rows using React JS

Discover the convenient shortcut keys that enable you to easily align text in editors, similar to the functionality found in

How can I vertically align a photo or image on Facebook?