How to manipulate JavaScript's Date object?

Javascript Web Development Front End Technology

To manipulate JavaScript’s Date object, you can either use get or set method and properties. For example, to set hours or to get minutes in JavaScript.

Once a Date object is created, a number of methods allow you to operate on it. Most methods simply allow you to get and set the year, month, day, hour, minute, second, and millisecond fields of the object, using either local time or UTC (universal, or GMT) time.

Here is a list of the methods used to Date and their description.

Sr.No	Methods & Description
1	date() Returns today's date and time
2	getDate() Returns the day of the month for the specified date according to local time.
3	getDay() Returns the day of the week for the specified date according to local time
4	getFullYear() Returns the year of the specified date according to local time.
5	getHours() Returns the hour in the specified date according to local time.
6	getMilliseconds() Returns the milliseconds in the specified date according to local time.
7	getMinutes() Returns the minutes in the specified date according to local time.
8	getMonth() Returns the month in the specified date according to local time
9	getSeconds() Returns the seconds in the specified date according to local time.
10	setDate() Sets the day of the month for a specified date according to local time.
11	setFullYear() Sets the full year for a specified date according to local time.
12	setHours() Sets the hours for a specified date according to local time.
13	setMilliseconds() Sets the milliseconds for a specified date according to local time.
14	setMinutes() Sets the minutes for a specified date according to local time.

Let’s have a look at the following in detail −

Creating a Date Object.
Formatting a Date Object.
Updating a Date Object.

Creating a Date Object

Date objects can be created in multiple ways. A simple Date object of the current date and time can be created using the Date constructor or the date object's now() method. We can create a Date object for a particular date and time by passing a date string into the Date object constructor.

Syntax

Users can follow the syntax below to create a Date object −

Current Date and Time

let date = new Date()
// Thu Aug 18 2022 19:54:39 GMT+0530 (India Standard Time)
date = Date.now()
// 1660832679758

In the above syntax, Date object creation with the Date constructor provides a formatted string of the current date and time, and the now() method provides the total number of times in milliseconds from 1st January 1970 at 00:00:00 (UTC).

Using Date constructor parameters

let date = new Date("2000-11-09")
// Thu Nov 09 2000 05:30:00 GMT+0530 (India Standard Time)
date = new Date("2000-11-09T07:00Z")
// Thu Nov 09 2000 12:30:00 GMT+0530 (India Standard Time)
date = new Date("2000-11-09T07:00")
// Thu Nov 09 2000 07:00:00 GMT+0530 (India Standard Time)
date = new Date("2000-11-09T07:00+05:30")
// Thu Nov 09 2000 07:00:00 GMT+0530 (India Standard Time)

In the above syntax, users can see that the date and time constructor parameter string has a format like −

YYYY-MM-DDTHH:mm:ss.sssZ

Where,

YYYY: year
MM: month of the year (01-12)
DD: date (01 to 31)
HH: hour in 24-hour format (0 to 23)
mm: minutes (00 to 59)
ss: seconds (00 to 59)
sss: milliseconds (000 to 999)
T is the separator between the time and date in the string.
Z represents the time in UTC. Otherwise, the time is considered the local time. If Z is not used, then use "+hh:mm" or "-hh:mm" at the end of the string to get the local timezone data and time.

Using Timestamp

let date = new Date(1660838032771)
// Thu Aug 18 2022 21:23:52 GMT+0530 (India Standard Time)

In the above syntax, we used a timestamp to create a Date object.

Formatting a Date Object

Using different methods, we can format the Date object's string into multiple forms. Below we are describing some of the methods that are used to format the Date object's string.

let date = new Date("2000-11-09")
date.toString()
// Thu Nov 09 2000 05:30:00 GMT+0530 (India Standard Time)
date.toDateString()
// Thu Nov 09 2000
date.toLocaleString()
// 11/9/2000, 5:30:00 AM
date.toLocaleDateString()
// 11/9/2000
date.toLocaleTimeString()
// 5:30:00 AM
date.toGMTString()
// Thu, 09 Nov 2000 00:00:00 GMT
date.toISOString()
// 2000-11-09T00:00:00.000Z
date.toUTCString()
// Thu, 09 Nov 2000 00:00:00 GMT
date.toTimeString()
// 05:30:00 GMT+0530 (India Standard Time)
date.getTime()
// 973728000000

In the above syntax, we have shown different methods to format the Date object along with their returning values below.

Example

In this example, we have formatted the Date object into different forms after a button click.


<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 the Date Object

The Date object can be updated by using some methods. In the below, we discussed some of the methods to update the Date object.

const date = new Date("2022-01-30")
// Sun Jan 30 2022 05:30:00 GMT+0530 (India Standard Time)
date.setYear(1947)
// Thu Jan 30 1947 05:30:00 GMT+0530 (India Standard Time)
date.setMonth(7)
// Sat Aug 30 1947 05:30:00 GMT+0530 (India Standard Time)
date.setDate(15)
// Fri Aug 15 1947 05:30:00 GMT+0530 (India Standard Time)
date.setHours(10)
// Fri Aug 15 1947 10:30:00 GMT+0530 (India Standard Time)
date.setMinutes(21)
// Fri Aug 15 1947 10:21:00 GMT+0530 (India Standard Time)
date.setUTCDate(1)
// Fri Aug 01 1947 10:21:00 GMT+0530 (India Standard Time)
date.setUTCMinutes(56)
// Fri Aug 01 1947 10:26:00 GMT+0530 (India Standard Time)

In the above syntax, these methods are used to update the date object, like the setYear() method updates the year of the Date object. Similarly, each method updates different properties of the Date object.

Example

In this example, we have used some methods to update a Date object using different button click events.


<html>
<body>
   <p> Manipulate JavaScript's Date object by <i> Updating the Date object</i></p>
   <button onclick = "updateYear()"> Update Year to 2022</button>
   <button onclick = "updateMonth()"> Update Month to August</button>
   <button onclick = "updateDate()"> Update Date to 15</button>
   <p id = "root"></p>
   <script>
      let root = document.getElementById('root')
      let status = document.getElementById('status')
      const date = new Date("2000-11-09")
      root.innerHTML = " <b>Date: </b> " + date;
      function updateYear() {
         date.setYear(2022)
         root.innerHTML = " <b> Date: </b> " + date;
      }
      function updateMonth() {
         date.setMonth(7)
         root.innerHTML = " <b> Date: </b> " + date;
      }
      function updateDate() {
         date.setDate(15)
         root.innerHTML = " <b> Date: </b> " + date;
      }
   </script>
</body>
</html>

In this tutorial, we discussed creating, formatting and updating a Date object with the help of different examples.

Shubham Vora

Updated on: 20-Oct-2022

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started