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.

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>