Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to clone a Date object in JavaScript?
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.
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
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 1st 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>
The old date is : Mon Dec 18 2023 14:30:45 GMT+0530 (India Standard Time) The cloned date is : Mon Dec 18 2023 14:30:45 GMT+0530 (India Standard Time)
In the above output, users can see that old date and cloned date are identical.
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
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>
The old date is : Mon Dec 18 2023 14:30:45 GMT+0530 (India Standard Time) The new date is : Mon Dec 18 2023 14:30:45 GMT+0530 (India Standard Time)
Setting 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 numeric format between 0 to 11.
Date ? It sets 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 date 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(2); // March (0-indexed)
clone_Date.setDate(3);
validate.innerHTML += " After setting the custom year, month, and date to cloned date is : " + clone_Date + "<br/>";
</script>
</body>
</html>
The old date is : Mon Dec 18 2023 14:30:45 GMT+0530 (India Standard Time) The cloned date is : Mon Dec 18 2023 14:30:45 GMT+0530 (India Standard Time) After setting the custom year, month, and date to cloned date is : Wed Mar 03 2021 14:30:45 GMT+0530 (India Standard Time)
Comparison
| Method | Return Value | Performance |
|---|---|---|
getTime() |
Milliseconds since epoch | Fast |
valueOf() |
Milliseconds since epoch | Fast |
Conclusion
Both getTime() and valueOf() methods work identically for cloning Date objects by returning milliseconds since epoch. Use either method to create perfect copies of Date objects that can be modified independently.
3K+ Views
