How to clone a Date object in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn to clone a Date object in JavaScript. We can create a new object of the Date class that contains the date and time according to the user’s requirement. Sometimes, it needs to copy the date, which means cloning it. In such cases, users can use the different approaches given below.

Also, we will learn to set the new time and date in the cloned date in this tutorial.

Clone a Date using the Date.getTime() Method

Users can simply create the new object of the Date class and get the total number of milliseconds from the 1st Jan 1970 using the getTime() method. When we pass the total number of milliseconds to the Date() class constructor as a parameter, it generates the date and time according to that and returns the new date object.

Syntax

We can follow the below syntax to clone the date using the getTime() method.

let current_date = new Date();
let clone_Date = new Date( current_date.getTime() );

Parameters

current_date.getTime() − It is a total number of milliseconds of the old date from starting the 1^st Jan 1970.

Example

In the example below, we have created the new date object using the constructor of the Date class. We have created cloned date of the original date using the Date.getTime() method.


<html>
<head>
</head>
<body>
   <h2> Clone a date object using JavaScript. </h2>
   <h4> Cloning the date using <i> Date.getTime() </i> method. </h4>
   <p id = "validate"> </p>
   <script>
      let validate = document.getElementById("validate");
      
      // taking the current date
      let current_date = new Date();
      let clone_Date = new Date( current_date.getTime() );
      validate.innerHTML += " The old date is : " + current_date + "<br/>";
      validate.innerHTML += " The cloned date is : " + clone_Date + "<br/>";
   </script>
</body>
</html>

In the above output, users can see that old data and cloned date is similar.

Using the Date.valueOf() method

The Date.valueOf() method is also a method of the date class that returns the total number of milliseconds from the first epoch that has been started. We can find the total number of milliseconds of the old date using the valueOf() method and pass it to the new Date object as a parameter.

Syntax

Users can follow the syntax below to clone the date using the Date.valueOf() method.

let current_date = new Date();
let clone_Date = new Date( current_date.valueOf() );

Example

In the example below, we have created the new date object to get the current date. Also, we have cloned the date using the valueOf() method, and users can see in the output that both dates are similar.


<html>
<head>
</head>
<body>
   <h2> Clone a date object using JavaScript. </h2>
   <h4> Cloning the date using <i> Date.valueOf()</i> method. </h4>
   <p id = "validate"> </p>
   <script>
      let validate = document.getElementById("validate");
      
      // taking the current date
      let old_date = new Date();
      let new_Date = new Date( old_date.valueOf() );
      validate.innerHTML += " The old date is : " + old_date + "<br/>";
      validate.innerHTML += " The new date is : " + new_Date + "<br/>";
   </script>
</body>
</html>

Set the Custom Date to Cloned Date

Users have learned to clone the date from one date to another and make a copy of it. Now, we will learn to set the year, month, or date to the clone date. We can simply use the different methods of the date class.

Users can follow the syntax below to use different methods of the date class to change the year, month, or date of the cloned date.

Syntax

let date = new Date();
let new_date = new Date( date.valueOf() );
new_date.setFullYear( Year ); // set new Year
new_date.setMonth( Month ); // set new Month
new_date.setDate( Date ); // set new Date

Parameters

Year − It is a new year which users want to set for the cloned date.
Month − It is a new month for the cloned date in string format between 0 to 11.
Date − It set the day of the month.

Example

In the example below, we have cloned the date and set the new year, month, and day to the cloned date. Users can see the difference between the cloned data and the new date after setting up the new values.


<html>
<head>
</head>
<body>
   <h2> Clone a date object using JavaScript. </h2>
   <h4> Change the date and time in cloned date using <i> Date class </i> methods. </h4>
   <p id = "validate"> </p>
   <script>
      let validate = document.getElementById("validate");
      
      // taking the current date
      let current_date = new Date();
      let clone_Date = new Date(current_date.valueOf());
      validate.innerHTML += " The old date is : " + current_date + "<br/>";
      validate.innerHTML += " The cloned date is : " + clone_Date + "<br/>";
      clone_Date.setFullYear("2021");
      clone_Date.setMonth("02");
      clone_Date.setDate("3");
      validate.innerHTML += " After settings the custom year, month, and date to cloned date is : " + clone_Date + "<br/>";
   </script>
</body>
</html>

In this tutorial, we have learned to clone the date using the getTime() and valueOf() methods of the Date class. Also, we have learned to set new values to the date in the last section of the tutorial.