JavaScript - Set Date Methods

Set Date Methods

JavaScript Set Date Methods are functionalities linked to the Date object in JavaScript, designed to streamline the adjustment and modification of specific elements within a date and time structure. These methods empower developers to efficiently update individual components, such as year, month, day, hour, and minute, in a Date object, offering a convenient approach for handling and manipulating date-related values in JavaScript applications.

Here, we will discuss about these JavaScript set date methods in detail. The table below comprises of the most commonly used set date methods and their corresponding description.

Method	Description
setFullYear(year)	Sets the year of the date object. Accepts a four-digit year. Adjusts the date; if it's a leap year and the date is February 29, it remains; otherwise, it changes to the closest valid date in the new year.
setMonth(month)	Sets the month of the date object (0-11). Accepts a numeric value (0-11). Adjusts the date, changing the year if the month value is outside the valid range.
setDate(day)	Sets the day of the month for the date object (1-31). Accepts a numeric value (1-31). Adjusts the date, changing the month and year if the day value is outside the valid range for the current month.
setHours(hours)	The function sets the hour of a date object within the range of 0-23, accepting only numeric values. It adjusts the date as necessary to maintain validity, potentially altering the month and year in addition to time.
setMinutes(minutes)	Accepts numbers ranging from 0 to 59 and sets the minutes of that particular date object. It adjusts the date in such a way that hour, date, month and year are a valid date and time.
setSeconds(seconds)	Sets the seconds of the date object (0-59). Accepts a numeric value (0-59). Adjusts the date, potentially changing the minute, hour, date, month, and year to ensure a valid date and time.
setMilliseconds(ms)	Sets the milliseconds of the date object (0-999). Accepts a numeric value (0-999). Adjusts the date, potentially changing the second, minute, hour, date, month, and year to ensure a valid date and time.
setTime(milliseconds)	The function sets the date and time in milliseconds since January 1, 1970; it accepts a numeric value. Then, the entire date object is transformed to reflect the provided milliseconds value.
setUTCFullYear(year)	Takes input as a 4 digit year and adjusts the Coordinated Universal Time or UTC, considering the leap years.
setUTCMonth(month)	Sets the UTC month of the date object (0-11). Accepts a numeric value (0-11). Adjusts the date in Coordinated Universal Time (UTC), potentially changing the year if the month value is outside the valid range.
setUTCDate(day)	Accepts numeric value between 1 to 31 and sets the UTC day of the month for that particular date object. It basically adjusts the date in Coordinated Universal Time (UTC), changing the month and year if the day value is in the valid range for the current month.
setUTCHours(hours)	Sets the UTC hour of the date object (0-23). Accepts a numeric value (0-23). Adjusts the date in Coordinated Universal Time (UTC), potentially changing the date, month, and year to ensure a valid date and time.
setUTCMinutes(minutes)	Sets the UTC minutes of the date object (0-59). Accepts a numeric value (0-59). Adjusts the date in Coordinated Universal Time (UTC), potentially changing the hour, date, month, and year to ensure a valid date and time.
setUTCSeconds(seconds)	Sets the UTC seconds of the date object (0-59). Accepts a numeric value (0-59). Adjusts the date in Coordinated Universal Time (UTC), potentially changing the minute, hour, date, month, and year to ensure a valid date and time.
setUTCMilliseconds(ms)	Sets the UTC milliseconds of the date object (0-999). Accepts a numeric value (0-999). Adjusts the date in Coordinated Universal Time (UTC), potentially changing the second, minute, hour, date, month, and year to ensure a valid date and time.

Examples

Example 1: Simple implementation of set methods

We employ set methods to modify a variety of date components, thereby demonstrating the versatility inherent in each method. These adjustments to the current date accommodate diverse scenarios; they include not only adding years, months and days but also hours - even minutes and milliseconds.

<!DOCTYPE html>
<html>
<body>
   <div id="result">  
      <p id="setFullYear"></p>
      <p id="setMonth"></p>
      <p id="setDate"></p>
      <p id="setHours"></p>
      <p id="setMinutes"></p>
      <p id="setSeconds"></p>
      <p id="setMilliseconds"></p>
      <p id="setTime"></p>
      <p id="setUTCFullYear"></p>
      <p id="setUTCMonth"></p>
      <p id="setUTCDate"></p>
      <p id="setUTCHours"></p>
      <p id="setUTCMinutes"></p>
      <p id="setUTCSeconds"></p>
      <p id="setUTCMilliseconds"></p>
   </div>
   <script>
      const currentDate = new Date();
      currentDate.setFullYear(currentDate.getFullYear() + 1);
      document.getElementById("setFullYear").innerText = `setFullYear: ${currentDate.toDateString()}`;
     
      currentDate.setMonth(currentDate.getMonth() + 2);
      document.getElementById("setMonth").innerText = `setMonth: ${currentDate.toDateString()}`;
      
		currentDate.setDate(currentDate.getDate() + 5);
      document.getElementById("setDate").innerText = `setDate: ${currentDate.toDateString()}`;
 
      currentDate.setHours(currentDate.getHours() + 3);
      document.getElementById("setHours").innerText = `setHours: ${currentDate.toDateString()}`;
  
      currentDate.setMinutes(currentDate.getMinutes() + 15);
      document.getElementById("setMinutes").innerText = `setMinutes: ${currentDate.toDateString()}`;
      
		currentDate.setSeconds(currentDate.getSeconds() + 30);
      document.getElementById("setSeconds").innerText = `setSeconds: ${currentDate.toDateString()}`;
  
      currentDate.setMilliseconds(currentDate.getMilliseconds() + 500);
      document.getElementById("setMilliseconds").innerText = `setMilliseconds: ${currentDate.toDateString()}`;
      
		currentDate.setTime(currentDate.getTime() + 86400000); // 86400000 milliseconds in a day
      document.getElementById("setTime").innerText = `setTime: ${currentDate.toDateString()}`;
  
      currentDate.setUTCFullYear(currentDate.getUTCFullYear() + 1);
      document.getElementById("setUTCFullYear").innerText = `setUTCFullYear: ${currentDate.toDateString()}`;
  
      currentDate.setUTCMonth(currentDate.getUTCMonth() + 2);
      document.getElementById("setUTCMonth").innerText = `setUTCMonth: ${currentDate.toDateString()}`;
      
		currentDate.setUTCDate(currentDate.getUTCDate() + 5);
      document.getElementById("setUTCDate").innerText = `setUTCDate: ${currentDate.toDateString()}`;
       
		currentDate.setUTCHours(currentDate.getUTCHours() + 3);
      document.getElementById("setUTCHours").innerText = `setUTCHours: ${currentDate.toDateString()}`;
  
      currentDate.setUTCMinutes(currentDate.getUTCMinutes() + 15);
      document.getElementById("setUTCMinutes").innerText = `setUTCMinutes: ${currentDate.toDateString()}`;
  
      currentDate.setUTCSeconds(currentDate.getUTCSeconds() + 30);
      document.getElementById("setUTCSeconds").innerText = `setUTCSeconds: ${currentDate.toDateString()}`;
  
      currentDate.setUTCMilliseconds(currentDate.getUTCMilliseconds() + 500);
      document.getElementById("setUTCMilliseconds").innerText = `setUTCMilliseconds: ${currentDate.toDateString()}`;
   </script>
</body>
</html>

Example 2: Combining Set Date Methods for a Complex Update

A sophisticated date manipulation combines multiple set methods: for instance, it adjusts the date by adding two years; subtracts one month then adds fifteen days. Finally with precision and accuracy, the time is set at 18:30:45.

<!DOCTYPE html>
<html>
<body>
   <div id="result">
      <h2>Complex Date Manipulation</h2>
      <p id="complexManipulation"></p>
   </div>
   <script>
      const currentDate = new Date();

     // Combining multiple set methods for a complex update
     currentDate.setFullYear(currentDate.getFullYear() + 2);
     currentDate.setMonth(currentDate.getMonth() - 1);
     currentDate.setDate(currentDate.getDate() + 15);
     currentDate.setHours(18);
     currentDate.setMinutes(30);
     currentDate.setSeconds(45);

     document.getElementById("complexManipulation").innerText = 
	  `Complex Manipulation Result: ${currentDate.toDateString()} ${currentDate.toTimeString()}`;
   </script>
</body>
</html>