Javascript Date

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.

MethodDescription
getFullYearReturns the current year in 4 digit format
getDateReturns the current date
getDayReturns the day of the week as integer starting with Sunday=0
getHoursReturns the hours of the current time in 24 hours format
getMillisecondsReturns the milliseconds of the current time
getMinutesReturns the minutes of the current time
getMonthReturns the current month in the form of integer starting with January as 0 until December as 11
getSecondsReturns the seconds of the current time
getTimeReturns the number of milliseconds since Jan 1, 1970
getTimezoneOffsetReturns 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

MethodDescription
getUTCDateReturns specified date according to universal time
getUTCDayReturns specified day of week in integer(0 to 6) according to universal time
getUTCFullYearReturns specified year according to universal time
getUTCHoursReturns specified hours according to universal time
getUTCMillisecondsReturns specified milliseconds according to universal time
getUTCMinutesReturns specified minutes according to universal time
getUTCSecondsReturns specified seconds according to universal time
getUTCMonthReturns 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

MethodDescription
setDateSets the day of the month for the specified date
setFullYearSets the year for the specified date
setMillisecondsSets the milliseconds for the specified date
setMinutesSets the minutes for the specified date
setMonthSets the month for the specified date
setSecondsSets the seconds for the specified date
setTimeSets 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

MethodDescription
setUTCDateSets the day of the month for a specified date according to universal time
setUTCFullYearSets the year for a specified date according to universal time
setUTCHoursSets the hour for a specified date according to universal time
setUTCMillisecondsSets the milliseconds of the specified date according to universal time
setUTCMinutesSets the minutes for the specified date according to universal time
setUTCMonthSets the month for a specified date according to universal time
setUTCSecondsSets 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.

MethodDescription
toDateStringReturns the date part of the date object
toISOStringReturns the date in ISO String format
toJSONReturns string representing the date object in the form of JSON
toStringReturns date in the form of string
toTimeStringReturns the time part of the date object
toUTCStringConverts the date into string format based on UTC time zone
valueOfReturns the primitive value of the date object
parseThis is static method of Date object.Parses the string representation of the date and returns the milliseconds
UTCThis 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

Translate »