What is the reason behind the inconsistent behavior of Javascript's Date.getDate() and .setDate() methods?

Question

What is the reason behind the inconsistent behavior of Javascript's Date.getDate() and .setDate() methods?

As a hobbyist coder, I'm facing a challenging problem with building a dynamic HTML/CSS calendar. My goal is to have cells filled in based on today's date. However, when I attempt to add days to fill in another 13 days by looping through HTML elements.innerHTML, I hit a roadblock.

If I use setDate(30 + 2) and then getDate(), everything works perfectly fine. Javascript recognizes that June ends on the 30th day, resulting in 2 (July 2nd), just as I wanted.

Here lies the issue - this method only functions properly if there is a single call. When I introduce a loop or make multiple calls to this code, the outcome varies. Could it be some asynchronous operation causing this inconsistency? Below is the code snippet:

const theDate = new Date();
    const todaysDate = 30;
    
    theDate.setDate(todaysDate + 1);
    let result1 = theDate.getDate();
    
    theDate.setDate(todaysDate + 2);
    let result2 = theDate.getDate();
    
    theDate.setDate(todaysDate + 3);
    let result3 = theDate.getDate();
    
    theDate.setDate(todaysDate + 4);
    let result4 = theDate.getDate();
    
    console.log(result1);
    console.log(result2);
    console.log(result3);
    console.log(result4);

javascript html css date getdate

Answer 1

Answer №1

June may have 30 days, but July boasts 31.

Should you dare to set the date to 32 for the very first time, it lands on the non-existent 32nd of June - subsequently rolling over to July 2nd due to its proximity to the end of June. (32-30=2)

Attempting to set the date to 32 once more finds us in July already, causing the extra days beyond July 31 to carry us into August 1st. (32-31=1).

Answer 2

June may have 30 days, but July boasts 31.

Should you dare to set the date to 32 for the very first time, it lands on the non-existent 32nd of June - subsequently rolling over to July 2nd due to its proximity to the end of June. (32-30=2)

Attempting to set the date to 32 once more finds us in July already, causing the extra days beyond July 31 to carry us into August 1st. (32-31=1).

Answer 3

Answer №2

Regarding your inquiry, the behavior of the setDate() function may appear strange to you due to setting the date relative to the previous value. This results in increments of 31, 32, or 33 days instead of by 1, 2, or 3. For more detailed insight, refer to @Quentin's insightful response. I simply wanted to highlight the root cause and provide my own solution.

If you seek an alternative approach for generating dates:

const dayOfMonth = 30;
const date = new Date();
date.setDate(dayOfMonth);
console.log("Date:", date);

let timestamp = Date.parse(date);

for (let i = 1; i <= 14; i++) {
  const newTimestamp = timestamp + i * (1000 * 60 * 60 * 24);
  const newDate = new Date(newTimestamp);
  console.log("New date:", newDate);
}

This method involves manipulating the timestamp to generate new dates based on the incremental addition of milliseconds in a day.

You can customize your date logic within the loop to populate the calendar as mentioned.

Answer 4

Regarding your inquiry, the behavior of the setDate() function may appear strange to you due to setting the date relative to the previous value. This results in increments of 31, 32, or 33 days instead of by 1, 2, or 3. For more detailed insight, refer to @Quentin's insightful response. I simply wanted to highlight the root cause and provide my own solution.

If you seek an alternative approach for generating dates:

const dayOfMonth = 30;
const date = new Date();
date.setDate(dayOfMonth);
console.log("Date:", date);

let timestamp = Date.parse(date);

for (let i = 1; i <= 14; i++) {
  const newTimestamp = timestamp + i * (1000 * 60 * 60 * 24);
  const newDate = new Date(newTimestamp);
  console.log("New date:", newDate);
}

This method involves manipulating the timestamp to generate new dates based on the incremental addition of milliseconds in a day.

You can customize your date logic within the loop to populate the calendar as mentioned.

Answer 5

Answer №3

If you implement the Date() constructor in each loop, there is no need to be concerned about the varying days in a specific month.

Detailed explanations are included in the example below

/**
 * @desc - generate a sequence of dates beginning from today (or a specified
 *         date) and extending for a given number of days
 * @param {number} range - The number of days
 * @param {string<date>} start - The starting date for the sequence,
 *        default is today if not specified
* @return {array<date>} An array containing the generated dates
 */
function dayRange(range, start) {
  // Use today's date as default if 'start' is undefined
  let now = start ? new Date(start) : new Date();
  // Create an array of empty slots with length equal to 'range'
  let rng = [...new Array(range)];

  /*
  Iterate through the 'rng' array
  Add today's date in the first iteration... 
  ... then calculate tomorrow's date for subsequent iterations...
  ... and return it in local format
  */
  return rng.map((_, i) => {
    if (i === 0) {
      return now.toLocaleDateString();
    }
    let day = now.getDate() + 1;
    now.setDate(day);
    return now.toLocaleDateString();
  });
}

console.log("Specify the first parameter if today is the starting point");
console.log(JSON.stringify(dayRange(14)));

console.log("Provide a properly formatted date string as the second parameter to start on a date other than today");
console.log(JSON.stringify(dayRange(10, '05/12/2020')));

Answer 6

If you implement the Date() constructor in each loop, there is no need to be concerned about the varying days in a specific month.

Detailed explanations are included in the example below

/**
 * @desc - generate a sequence of dates beginning from today (or a specified
 *         date) and extending for a given number of days
 * @param {number} range - The number of days
 * @param {string<date>} start - The starting date for the sequence,
 *        default is today if not specified
* @return {array<date>} An array containing the generated dates
 */
function dayRange(range, start) {
  // Use today's date as default if 'start' is undefined
  let now = start ? new Date(start) : new Date();
  // Create an array of empty slots with length equal to 'range'
  let rng = [...new Array(range)];

  /*
  Iterate through the 'rng' array
  Add today's date in the first iteration... 
  ... then calculate tomorrow's date for subsequent iterations...
  ... and return it in local format
  */
  return rng.map((_, i) => {
    if (i === 0) {
      return now.toLocaleDateString();
    }
    let day = now.getDate() + 1;
    now.setDate(day);
    return now.toLocaleDateString();
  });
}

console.log("Specify the first parameter if today is the starting point");
console.log(JSON.stringify(dayRange(14)));

console.log("Provide a properly formatted date string as the second parameter to start on a date other than today");
console.log(JSON.stringify(dayRange(10, '05/12/2020')));

What is the reason behind the inconsistent behavior of Javascript's Date.getDate() and .setDate() methods?

Answer №1

Answer №2

Answer №3

Similar questions

Guide to retrieving a byte array from a server using JavaScript and converting it into a downloadable PDF

Using Twig path to pass Ajax URL parameter

Setting the CSS property `overflow-y: scroll;` does not make the element scrollable and causes it to exceed 100% of the block

Mapping the Way: Innovative Controls for Navigation

Angular allows for dynamic sourcing of iframes

Error: The function is not defined on this.props during the handleCHange event

The div that scrolls gracefully within its boundaries

Using Jquery to make an Ajax request to a PHP script that retrieves JSON data

Which is better: triggering mouseleave from inside or outside of mouseenter event

Where is the best location to store the image files?

Click the button to send the form without including any hidden HTML element array value

How can you use React.js to only display "Loading..." on the page while the full name is included in the URL?

Using webGL for rendering drawElements

Using orchestrate.js for local passport.js authentication

Feeling puzzled by the concept of CSS Block Formatting Contexts (BFCs)

Enable tabber upon clicking on the navigation bar

Updating and removing items from a React state using push and pop methods

Having trouble sending data from AJAX to PHP

Incorporate content from a single HTML file into a different one

Why are imported modules unable to reach global variables in Node?