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 manipulate JavaScript's Date object?
JavaScript's Date object provides powerful methods to manipulate dates and times. You can use getter methods to retrieve date components and setter methods to modify them. Understanding these methods is essential for effective date manipulation in JavaScript applications.
Once a Date object is created, numerous methods allow you to operate on it. Most methods let you get and set the year, month, day, hour, minute, second, and millisecond fields using either local time or UTC (universal, or GMT) time.
Common Date Methods
Here are the key methods used with Date objects:
| Sr.No | Methods & Description |
|---|---|
| 1 |
getDate() Returns the day of the month (1-31) according to local time |
| 2 |
getDay() Returns the day of the week (0-6) where 0 is Sunday |
| 3 |
getFullYear() Returns the four-digit year according to local time |
| 4 |
getHours() Returns the hour (0-23) according to local time |
| 5 |
getMinutes() Returns the minutes (0-59) according to local time |
| 6 |
getMonth() Returns the month (0-11) where 0 is January |
| 7 |
setDate() Sets the day of the month according to local time |
| 8 |
setFullYear() Sets the full year according to local time |
| 9 |
setMonth() Sets the month according to local time |
| 10 |
setHours() Sets the hours according to local time |
Creating a Date Object
Date objects can be created in multiple ways. You can create a Date object for the current date and time or for a specific date by passing parameters.
Current Date and Time
let currentDate = new Date();
console.log(currentDate);
let timestamp = Date.now();
console.log("Timestamp:", timestamp);
2024-01-15T10:30:00.000Z Timestamp: 1705315800000
Using Date Constructor Parameters
let specificDate = new Date("2023-12-25");
console.log(specificDate);
let detailedDate = new Date("2023-12-25T15:30:00");
console.log(detailedDate);
let withTimezone = new Date("2023-12-25T15:30:00+05:30");
console.log(withTimezone);
2023-12-25T00:00:00.000Z 2023-12-25T15:30:00.000Z 2023-12-25T10:00:00.000Z
The date string format follows: YYYY-MM-DDTHH:mm:ss.sssZ where T separates date and time, and Z indicates UTC time.
Formatting Date Objects
JavaScript provides various methods to format Date objects into different string representations:
let date = new Date("2023-11-15T10:30:00");
console.log("toString():", date.toString());
console.log("toDateString():", date.toDateString());
console.log("toLocaleString():", date.toLocaleString());
console.log("toISOString():", date.toISOString());
console.log("getTime():", date.getTime());
toString(): Wed Nov 15 2023 10:30:00 GMT+0000 (UTC) toDateString(): Wed Nov 15 2023 toLocaleString(): 11/15/2023, 10:30:00 AM toISOString(): 2023-11-15T10:30:00.000Z getTime(): 1700046600000
Interactive Formatting Example
<html>
<body>
<p>Manipulate JavaScript's Date object by <i>Formatting the Date string</i></p>
<p id="element"></p>
<button onclick="format()">Format Date</button>
<p id="root"></p>
<script>
let root = document.getElementById('root');
const date = new Date();
document.getElementById('element').innerHTML = "<b>Date: </b>" + date;
function format() {
let str = '<b>Using toLocaleString(): </b>' + date.toLocaleString() + '<br />';
str += '<b>Using toISOString(): </b>' + date.toISOString() + '<br />';
str += '<b>Using getTime(): </b>' + date.getTime();
root.innerHTML = str;
}
</script>
</body>
</html>
Updating Date Objects
You can modify Date objects using setter methods. Each method updates specific components of the date:
const date = new Date("2023-01-15");
console.log("Original:", date.toDateString());
date.setFullYear(2024);
console.log("After setFullYear(2024):", date.toDateString());
date.setMonth(11); // December (0-indexed)
console.log("After setMonth(11):", date.toDateString());
date.setDate(25);
console.log("After setDate(25):", date.toDateString());
date.setHours(15, 30, 0); // 3:30 PM
console.log("After setHours(15,30,0):", date.toString());
Original: Sun Jan 15 2023 After setFullYear(2024): Mon Jan 15 2024 After setMonth(11): Sun Dec 15 2024 After setDate(25): Wed Dec 25 2024 After setHours(15,30,0): Wed Dec 25 2024 15:30:00 GMT+0000 (UTC)
Interactive Update Example
<html>
<body>
<p>Manipulate JavaScript's Date object by <i>Updating the Date object</i></p>
<button onclick="updateYear()">Update Year to 2024</button>
<button onclick="updateMonth()">Update Month to December</button>
<button onclick="updateDate()">Update Date to 25</button>
<p id="root"></p>
<script>
let root = document.getElementById('root');
const date = new Date("2023-06-15");
root.innerHTML = "<b>Date: </b>" + date.toDateString();
function updateYear() {
date.setFullYear(2024);
root.innerHTML = "<b>Date: </b>" + date.toDateString();
}
function updateMonth() {
date.setMonth(11); // December
root.innerHTML = "<b>Date: </b>" + date.toDateString();
}
function updateDate() {
date.setDate(25);
root.innerHTML = "<b>Date: </b>" + date.toDateString();
}
</script>
</body>
</html>
Key Points
Month values are zero-indexed (0 = January, 11 = December)
Day of week values are zero-indexed (0 = Sunday, 6 = Saturday)
UTC methods are available for timezone-independent operations
Date objects are mutable - setter methods modify the original object
Conclusion
JavaScript's Date object provides comprehensive methods for creating, formatting, and updating dates. Master these getter and setter methods to handle date manipulation effectively in your applications.
3K+ Views
