JavaScript - SPLessons

JavaScript Date

Chapter 19

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

JavaScript Date

JavaScript Date

shape Introduction

Date object deals with JavaScript dates and times. To create a Date Object, Date() constructor is used. There are many ways to initiate a date. Mostly used initiations are:

All dates are calculated in milliseconds from Midnight 1 January 1970. It is called as Co-ordinated Universal Time (UTC) and is used by scientific community to keep the exact time. These JavaScript Date can be represented in string format such as Wed Apr 21 2016 02:25:12 GMT-0700 or integer format such as 651561618445615.

shape Example

Below example shows the current date and time using new Date() constructor in JavaScript Date.

<!DOCTYPE html>
<html>
	<body>
	 
		<p id="demo"></p>
	 
		<script>
		//Creating a date object
		var d = new Date();
		document.getElementById("demo").innerHTML = d;
		</script>
	 
	</body>
</html>

Output:

Below example shows the specified time and date.

<!DOCTYPE html>
<html>
	<body>
	 
	<p id="demo"></p>
	 
	<script>
		var d = new Date("June 7, 2012 12:20:00");
		document.getElementById("demo").innerHTML = d;
	</script>
	 
	</body>
</html>

Output:

Below example shows the usage of new Date(7 numbers) by creating a new date object with the specified date and time.

<!DOCTYPE html>
<html>
	<body>
	 
	<p id="demo"></p>
	 
	<script>
		var d = new Date(94,5,7,6,12,15,0);
		document.getElementById("demo").innerHTML = d;
	</script>
	 
	</body>
</html>

Output:

Date Formats

shape Description

Date formats are categorized into 4 types.

All these are input formats. But, the output format of dates will be represented in string format by default.

ISO Date Format

The international standard to represent dates and time is ISO 8601(YYYY-MM-DD).

<!DOCTYPE html>
<html>
	<body>
	 
	<p id="demo"></p>
	<p id="test"></p>
	<p id="test1"></p>
	<p id="test2"></p>
	 
	<script>
		//complete date
		document.getElementById("demo").innerHTML = new Date("2015-03-25");
		 
		//only year and month
		document.getElementById("test").innerHTML = new Date("2015-03");
		 
		//Only year
		document.getElementById("test1").innerHTML = new Date("2015");
		 
		//date with hour,minutes and seconds
		document.getElementById("test2").innerHTML = new Date("2015-03-25T12:00:00");
	</script>
	 
	</body>
</html>

Output:

Short Date Format

The syntax of short date format “MM/DD/YYYY” or “YYYY/MM/DD” is as follows.

<!DOCTYPE html>
<html>
	<body>
	 
	<p id="demo"></p>
	 
	 
	<script>
		//date as MM/DD/YYYY
		document.getElementById("demo").innerHTML = new Date("03/25/2015");
	 
	</script>
	 
	</body>
</html>

Output:

Long Date Format

The syntax of Long date format “MMM DD YYYY” is as follows.

<!DOCTYPE html>
<html>
	<body>

	<p id="demo"></p>

	<script>
		document.getElementById("demo").innerHTML = new Date("Mar 25 2015");
	</script>

	</body>
</html>

Output:

Full Date Format

Date Strings are allowed in full date format. If any errors occur in day name and time, JavaScript will ignore those errors.

<!DOCTYPE html>
<html>
	<body>
	 
	<p id="demo"></p>
	 
	<script>
		document.getElementById("demo").innerHTML = 
		new Date("Wed Mar 25 2015 09:56:24 GMT+0100 (W. Europe Standard Time)");
	</script>
	 
	</body>
</html>

Output:

Summary

shape Key Points

  • new Date() constructor is used to create Date objects.
  • ISO, Short, Long and Full are the JavaScript Date formats in JavaScript.