JavaScript Date Object - JavaScript Date Methods

Javascript date object is used to fetch date and time-related data. We can get values like date, day, month, year, time, hour, seconds, etc using different Date methods. We can also fetch different Date Formats using this object.

Create a Javascript date object

We can use any of the below 4 constructors to create a date object in Javascript. For this, we use the keyword “new”.

new Date()

When we do not pass any arguments to the Date constructor, the JavaScript Date method returns the current date and time value.

<html>
<body>
<p> Display current date using Date() constructor</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

Output:
Display current date using Date() constructor

Tue Jun 09 2020 09:16:13 GMT+0530 (India Standard Time)

new Date(milliseconds)

Here, we pass milliseconds as parameter tot he constructor in the form of a numeric value. This means the JavaScript Date method considers the date in the form of milliseconds which is returned by getTime(). In the below example, we pass 10000 milliseconds which means it displays the date as 10 seconds past Jan 1, 1970.

var d = new Date(10000);
console.log(d);

Output:
Display date using Date(milliseconds) constructor

Thu Jan 01 1970 05:30:10 GMT+0530 (India Standard Time)

new Date(datestring)

The parameter takes a string value which represents the date in the form of String.

<html>
<body>
<p> Display current date using Date(datestring) constructor</p>
<p id="demo"></p>
<script>
var d = new Date("June 8, 2020 16:03:35");
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

Output:
Display date using Date(datestring) constructor

Mon Jun 08 2020 16:03:35 GMT+0530 (India Standard Time)

new Date(year,month,date,hour,minute,seconds,milliseconds)

This constructor takes the below mentioned 7 parameters as arguments. These fields are optional and return output based on the number of parameters passed in the order.

year – represents year in the form of 4 digit integer value

month – represents a month in the form of integer value starting from 0 (January) till 11(December)

date – denotes date as an integer value

hour – takes hour as an integer value in 24 hours format

minute – denotes minute as an integer value

seconds- considers seconds as an integer value

milliseconds – represents milliseconds as an integer value

Example to display Date and Time using JavaScript Date

<html>
<body>
<p> Display date and time using Date(year,month,date,hour,seconds,milleseconds)</p>
<p id="demo"></p>
<script>
var d = new Date(2020,6,8,16,10,25);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

Output:
Display date and time using Date(year,month,date,hour,seconds,milleseconds)

Wed Jul 08 2020 16:10:25 GMT+0530 (India Standard Time)

Example: When Date constructor has only 4 parameters

The below example gives the output as year, month, date and hour

<html>
<body>
<p> Using Date(year,month,date,hour,seconds,milleseconds) when passing only 1st 4 parameters</p>
<p id="demo"></p>
<script>
var d = new Date(2020,6,8,16);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

Output:
Using Date(year,month,date,hour,seconds,milleseconds) when passing only 1st 4 parameters

Wed Jul 08 2020 16:00:00 GMT+0530 (India Standard Time)

Example: When Date constructor has only 3 parameters

When we pass only 3 arguments, the JavaScript Date method displays only year, month and date

<html>
<body>
<p> Using Date(year,month,date,hour,seconds,milleseconds) when passing only 1st 3 parameters</p>
<p id="demo"></p>
<script>
var d = new Date(2019,1,28);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

Output:
Using Date(year,month,date,hour,seconds,milleseconds) when passing only 1st 3 parameters

Thu Feb 28 2019 00:00:00 GMT+0530 (India Standard Time)

Javascript GetDate methods

We can use the below methods to get date and time-related values from the Javascript Date object.

Method	Description
getFullYear	Returns the current year in 4 digit format
getDate	Returns the current date
getDay	Returns the day of the week as integer starting with Sunday=0
getHours	Returns the hours of the current time in 24 hours format
getMilliseconds	Returns the milliseconds of the current time
getMinutes	Returns the minutes of the current time
getMonth	Returns the current month in the form of integer starting with January as 0 until December as 11
getSeconds	Returns the seconds of the current time
getTime	Returns the number of milliseconds since Jan 1, 1970
getTimezoneOffset	Returns the time difference between the UTC time and local time in minutes

Examples of GetDate methods

The below code shows how to use GetDate methods in Javascript

var d = new Date();
console.log("Output of getFullyear() is " + d.getFullYear());
console.log("Output of getDate() is " + d.getDate());
console.log("Output of getDay() is " + d.getDay());
console.log("Output of getHours() is " + d.getHours());
console.log("Output of getMilliseconds is " + d.getMilliseconds());
console.log("Output of getMinutes() is " + d.getMinutes());
console.log("Output of getMonth() is " + d.getMonth());
console.log("Output of getSeconds() is " + d.getSeconds());
console.log("Output of getTime() is " + d.getTime());
console.log("Output of getTimezoneOffset() is " + d.getTimezoneOffset());

Output:
Output of getFullyear() is 2020
Output of getDate() is 9
Output of getDay() is 2
Output of getHours() is 22
Output of getMilliseconds is 169
Output of getMinutes() is 49
Output of getMonth() is 5
Output of getSeconds() is 4
Output of getTime() is 1591723144169
Output of getTimezoneOffset() is -330

Sample Javascript code to display the current time

This is an example to display current time using the JavaScript Date object.

var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
console.log("Current time is : " + h + ":" + m + ":" + s);

Output:
Current time is : 22:53:43

Get UTC Date methods

We can use the below methods to get date-time values according to universal time

Method	Description
getUTCDate	Returns specified date according to universal time
getUTCDay	Returns specified day of week in integer(0 to 6) according to universal time
getUTCFullYear	Returns specified year according to universal time
getUTCHours	Returns specified hours according to universal time
getUTCMilliseconds	Returns specified milliseconds according to universal time
getUTCMinutes	Returns specified minutes according to universal time
getUTCSeconds	Returns specified seconds according to universal time
getUTCMonth	Returns specified month as integer according to universal time(0 to 11)

Example of Get UTC Date methods

The below example shows how to use getUTC Date methods in Javascript

var d = new Date();
console.log("Output of getUTCDate() is " + d.getUTCDate());
console.log("Output of getUTCDay() is " + d.getUTCDay());
console.log("Output of getUTCFullYear() is " + d.getUTCFullYear());
console.log("Output of getUTCHours() is " + d.getUTCHours());
console.log("Output of getUTCMilliseconds() is " + d.getUTCMilliseconds());
console.log("Output og getUTCMinutes() is " + d.getUTCMinutes());
console.log("Output of getUTCSeconds() is " + d.getUTCSeconds());
console.log("Output of getUTCMonth() is " + d.getUTCMonth());

Output:
Output of getUTCDate() is 9
Output of getUTCDay() is 2
Output of getUTCFullYear() is 2020
Output of getUTCHours() is 17
Output of getUTCMilliseconds() is 677
Output og getUTCMinutes() is 32
Output of getUTCSeconds() is 14
Output of getUTCMonth() is 5

Set Date methods

We can use the below methods to set date or time values

Method	Description
setDate	Sets the day of the month for the specified date
setFullYear	Sets the year for the specified date
setMilliseconds	Sets the milliseconds for the specified date
setMinutes	Sets the minutes for the specified date
setMonth	Sets the month for the specified date
setSeconds	Sets the seconds for the specified date
setTime	Sets the date object to time in the form of milliseconds since Jan 1 1970

Example of set Date methods

In the below example, since we are using the same JavaScript date object, the output each method acts as input for the next methods.

<html>
<body>
<p><h2> Date Set Methods Example</h2></p>
<script>
var d = new Date();
document.writeln("Current date is : " + d + "<br><br>");
d.setDate(25);
document.writeln("Output of setDate() is " + d + "<br><br>");
d.setFullYear(2002);
document.writeln("Output of setFullYear() is " + d + "<br><br>");
d.setHours(16);
document.writeln("Output of setHours() is " + d + "<br><br>");
d.setMilliseconds(20);
document.writeln("Output of setMilliseconds() is " + d + "<br><br>");
d.setMinutes(35);
document.writeln("Output of setMinutes() is " + d + "<br><br>");
d.setMonth(4);
document.writeln("Output of setMonth() is " + d + "<br><br>");
d.setSeconds(54);
document.writeln("Output of setSeconds() is " + d + "<br><br>");
d.setTime(20000);
document.writeln("Output of setTime() is " + d + "<br><br>");
</script>
</body>
</html>

Output:

Date Set Methods Example
Current date is : Wed Jun 10 2020 15:16:42 GMT+0530 (India Standard Time)

Output of setDate() is Thu Jun 25 2020 15:16:42 GMT+0530 (India Standard Time)

Output of setFullYear() is Tue Jun 25 2002 15:16:42 GMT+0530 (India Standard Time)

Output of setHours() is Tue Jun 25 2002 16:22:45 GMT+0530 (India Standard Time)

Output of setMilliseconds() is Tue Jun 25 2002 15:16:42 GMT+0530 (India Standard Time)

Output of setMinutes() is Tue Jun 25 2002 15:35:42 GMT+0530 (India Standard Time)

Output of setMonth() is Sat May 25 2002 15:35:42 GMT+0530 (India Standard Time)

Output of setSeconds() is Sat May 25 2002 15:35:54 GMT+0530 (India Standard Time)

Output of setTime() is Thu Jan 01 1970 05:30:20 GMT+0530 (India Standard Time)

Set UTC Date methods

We can use the below methods to set the date or time values according to universal time

Method	Description
setUTCDate	Sets the day of the month for a specified date according to universal time
setUTCFullYear	Sets the year for a specified date according to universal time
setUTCHours	Sets the hour for a specified date according to universal time
setUTCMilliseconds	Sets the milliseconds of the specified date according to universal time
setUTCMinutes	Sets the minutes for the specified date according to universal time
setUTCMonth	Sets the month for a specified date according to universal time
setUTCSeconds	Sets the seconds for a specified date according to universal time

Example of set UTC Date methods

<html>
<body>
<p><h2> Date Set UTC Methods Example</h2></p><br>
<script>
var d = new Date();
document.writeln("Current date is : " + d + "<br><br>");
d.setUTCDate(12);
document.writeln("Output of setUTCDate() is " + d + "<br><br>");
d.setUTCFullYear(2000);
document.writeln("Output of setUTCFullYear() is " + d + "<br><br>");
d.setUTCHours(06);
document.writeln("Output of setUTCHours() is " + d + "<br><br>");
d.setUTCMilliseconds(15);
document.writeln("Output of setUTCMilliseconds() is " + d + "<br><br>");
d.setUTCMinutes(10);
document.writeln("Output of setUTCMinutes() is " + d + "<br><br>");
d.setUTCMonth(2);
document.writeln("Output of setUTCMonth() is " + d + "<br><br>");
d.setUTCSeconds(9);
document.writeln("Output of setUTCSeconds() is " + d + "<br><br>");
</script>
</body>
</html>

Output:
Date Set UTC Methods Example

Current date is : Wed Jun 10 2020 15:26:46 GMT+0530 (India Standard Time)

Output of setUTCDate() is Fri Jun 12 2020 15:26:46 GMT+0530 (India Standard Time)

Output of setUTCFullYear() is Mon Jun 12 2000 15:26:46 GMT+0530 (India Standard Time)

Output of setUTCHours() is Mon Jun 12 2000 12:26:46 GMT+0530 (India Standard Time)

Output of setUTCMilliseconds() is Mon Jun 12 2000 12:26:46 GMT+0530 (India Standard Time)

Output of setUTCMinutes() is Mon Jun 12 2000 11:40:46 GMT+0530 (India Standard Time)

Output of setUTCMonth() is Sun Mar 12 2000 11:40:46 GMT+0530 (India Standard Time)

Output of setUTCSeconds() is Sun Mar 12 2000 11:40:09 GMT+0530 (India Standard Time)

Other Date supporting methods

The date object also supports other methods as mentioned in the below table.

Method	Description
toDateString	Returns the date part of the date object
toISOString	Returns the date in ISO String format
toJSON	Returns string representing the date object in the form of JSON
toString	Returns date in the form of string
toTimeString	Returns the time part of the date object
toUTCString	Converts the date into string format based on UTC time zone
valueOf	Returns the primitive value of the date object
parse	This is static method of Date object.Parses the string representation of the date and returns the milliseconds
UTC	This is static method of Date object. Returns milliseconds representation of UTC date and time

Example of Date methods

<html>
<body>
<p><h2> Date Methods Example</h2></p><br>
<script>
var d = new Date(2020,5,10,15,49,34);
document.writeln("Output of toDateString() is " + d.toDateString() + "<br><br>");
document.writeln("Output of toISOString() is " + d.toISOString() + "<br><br>");
document.writeln("Output of toString() is " + d.toString() + "<br><br>");
document.writeln("Output of toTimeString() is " + d.toTimeString() + "<br><br>");
document.writeln("Output of toUTCString() is " + d.toUTCString() + "<br><br>");
var d = Date.parse("June 10, 2020 15:49:00");
document.writeln("Output of parse() is " + d + "<br><br>");
var d= new Date(2020,5,10,15,49,34);
document.writeln("Output of valueOf() is " + d.valueOf() + "<br><br>");
var d = Date.UTC(2020,5,10);
document.writeln("Output of UTC() is " + d + "<br><br>");
</script>
</body>
</html>

Output:
Date Methods Example

Output of toDateString() is Wed Jun 10 2020

Output of toISOString() is 2020-06-10T10:19:34.000Z

Output of toString() is Wed Jun 10 2020 15:49:34 GMT+0530 (India Standard Time)

Output of toTimeString() is 15:49:34 GMT+0530 (India Standard Time)

Output of toUTCString() is Wed, 10 Jun 2020 10:19:34 GMT

Output of parse() is 1591784340000

Output of valueOf() is 1591784374000

Output of UTC() is 1591747200000

JavaScript Date Format

Javascript supports 3 different Date Formats as inputs as mentioned below:

ISO Date – This is the international Standard. “YYYY-MM-DD”. Eg: 2020-06-20
Short Date – MM/DD/YYYY. Eg: 06/20/2020
Long Date – MMM DD YYYY or DD MMM YYYY Eg: Jun 20 2020 or 20 Jun 2020

Example for ISO Date Format

<html>
<body>
<p><h2> Date Format Example</h2></p><br>
<script>
var d = new Date("2020-06-20");
document.writeln(d);
</script>
</body>
</html>

Date Format Example

Mon Jun 20 2020 05:30:00 GMT+0530 (India Standard Time)

When we do not mention the date, it takes the default date as 01

<html>
<body>
<p><h2> Date Format Example</h2></p><br>
<script>
var d = new Date("2020-06");
document.writeln(d);
</script>
</body>
</html>

Date Format Example 

Mon Jun 01 2020 05:30:00 GMT+0530 (India Standard Time)

When we mention only the year, it takes default month as Jan and date as 01

<html>
<body>
<p><h2> Date Format Example</h2></p><br>
<script>
var d = new Date("2020");
document.writeln(d);
</script>
</body>
</html>

Date Format Example

Wed Jan 01 2020 05:30:00 GMT+0530 (India Standard Time)

Example for Short Date Format

<html>
<body>
<p><h2> Date Format Example</h2></p><br>
<script>
var d = new Date("06/20/2020");
document.writeln(d);
</script>
</body>
</html>

Date Format Example

Sat Jun 20 2020 00:00:00 GMT+0530 (India Standard Time)

Example for Long Date Format

<html>
<body>
<p><h2> Date Format Example</h2></p><br>
<script>
var d = new Date("Jun 18 2020");
document.writeln(d);
</script>
</body>
</html>

Date Format Example

Thu Jun 18 2020 00:00:00 GMT+0530 (India Standard Time)

Conclusion

This tutorial provides a detailed description of using Date related methods and Formats along with examples.

Reference