How to Display Date Format in JavaScript?

You can display different date format using Date object in JavaScript for your webpage or web application.The different date format may be year only (YYYY), year and month (YYYY-MM), complete date (YYYY-MM-DD), complete day with day name (YYYY-MM-DD DayName) and date with different time format. Different methods are available in date object to manipulate date in JavaScript. The Date object automatically hold the current date and time as its initial value. You can extract Year, Month, Day along with Hours, Minutes and Seconds from it. Here I have given very simple codes for printing different date formats, you can use respective codes for displaying that format of date on your web page.

JavaScript Date Format YYYY (year only)

<script type="text/javascript">
function displayDate(){
var now = new Date();
var year=now.getFullYear();
date.innerHTML=year
}
window.onload=displayDate;
</script>
<div id="date"></div>

It prints Year only. i.e. 2014

JavaScript Date Format YYYY-MM or MM-YYYY (year and month)

<script type="text/javascript">
function displayDate(){
var now = new Date();
var month=now.getMonth();
var monthName=new Array(12)
 monthName[0]="January";
 monthName[1]="February";
 monthName[2]="March";
 monthName[3]="April";
 monthName[4]="May";
 monthName[5]="June";
 monthName[6]="July";
 monthName[7]="August";
 monthName[8]="September";
 monthName[9]="October";
 monthName[10]="November";
 monthName[11]="December";
var year=now.getFullYear(); 
date.innerHTML=monthName[month]+",  "+year
}
window.onload=displayDate;
</script>
<div id="date"></div>

It prints Year and Month. i.e. February, 2014

JavaScript Date Format YYYY-MM-DD (complete date)

<script type="text/javascript">
function displayDate(){
var now = new Date();
var today=now.getDate();
var month=now.getMonth();
var monthName=new Array(12)
 monthName[0]="January";
 monthName[1]="February";
 monthName[2]="March";
 monthName[3]="April";
 monthName[4]="May";
 monthName[5]="June";
 monthName[6]="July";
 monthName[7]="August";
 monthName[8]="September";
 monthName[9]="October";
 monthName[10]="November";
 monthName[11]="December";
var year=now.getFullYear();
var day=now.getDay();
date.innerHTML=monthName[month]+today+ ",  "+year
}
window.onload=displayDate;
</script>
<div id="date"></div>

It prints Year, Month and Day. i.e. February21, 2014

JavaScript Date Format YYYY-MM-DD-DayName (date with day name)

<script type="text/javascript">
function displayDate(){
var now = new Date();
var today=now.getDate();
var month=now.getMonth();
var monthName=new Array(12)
 monthName[0]="January";
 monthName[1]="February";
 monthName[2]="March";
 monthName[3]="April";
 monthName[4]="May";
 monthName[5]="June";
 monthName[6]="July";
 monthName[7]="August";
 monthName[8]="September";
 monthName[9]="October";
 monthName[10]="November";
 monthName[11]="December";
var year=now.getFullYear();
var day=now.getDay();
var dayName=new Array(7)
 dayName[0]="Sunday";
 dayName[1]="MOnday";
 dayName[2]="Tuesday";
 dayName[3]="Wednesday";
 dayName[4]="Thrusday";
 dayName[5]="Friday";
 dayName[6]="Saturday";
date.innerHTML=monthName[month]+today+ ",  "+year+"  "+dayName[day]
}
window.onload=displayDate;
</script>
<div id="date"></div>

It prints Year, Month and Day with Day Name. i.e. February21, 2014 Friday

JavaScript Date Format YYYY-MM-DD hh:mm (date with hour and minute)

<script type="text/javascript">
function displayDate(){

var now = new Date();
var today=now.getDate();
var month=now.getMonth();
var h=now.getHours()
var m=now.getMinutes()
var s=now.getSeconds()

m=checkTime(m)
s=checkTime(s)

var monthName=new Array(12)
 monthName[0]="January";
 monthName[1]="February";
 monthName[2]="March";
 monthName[3]="April";
 monthName[4]="May";
 monthName[5]="June";
 monthName[6]="July";
 monthName[7]="August";
 monthName[8]="September";
 monthName[9]="October";
 monthName[10]="November";
 monthName[11]="December";
 
var year=now.getFullYear();
var day=now.getDay();

var dayName=new Array(7)
 dayName[0]="Sunday";
 dayName[1]="MOnday";
 dayName[2]="Tuesday";
 dayName[3]="Wednesday";
 dayName[4]="Thrusday";
 dayName[5]="Friday";
 dayName[6]="Saturday";

date.innerHTML=monthName[month]+today+ ",  "+year+"  "+h+":"+m
}
function checkTime(i)
{
if (i<10)
{ i="0" + i}
return i
}
window.onload=displayDate;
</script>
<div id="date"></div>

It prints Year, Month and Day with Hour and Minute. i.e. February21, 2014 9:18

To include other time formats refer to the previous post: How to Create a Digital Clock in JavaScript?

Intro Posts