How To Display Date Format In JavaScript

Do you want to display dates on your desired format for your website or web application using JavaScript? Are you searching the JavaScript codes for displaying dates in different formats? If so, here is the in-depth tutorial which helps you to display date format using JavaScript.

Different methods are available in date object to manipulate date in JavaScript. The Date object automatically holds 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 the date on your web page.

Table of Contents

Displaying Date Format in JavaScript

The different date format may be year only (YYYY), year and month (YYYY-MM), complete date (YYYY-MM-DD), a complete day with day name (YYYY-MM-DD DayName) and date with different time format.

1. Year only format (YYYY)

Use the following JavaScript code to display only the year in four digits.

<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 only the Year. i.e. 2019

2. Year and month format( YYYY-MM or MM-YYYY)

A combination of the following JavaScript code and HTML code will display the date having a year and month in the format.

<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, 2019

3. Complete date format (Month Name-DD- YYYY)

Use the following JavaScript code to display the complete date having month name day and year.

<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, 2019

4. Complete date with day name (YYYY-MM-DD-DayName)

The following JavaScript code will also display the day name along with the date format displayed above.

<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, 2019 Friday

5. Complete date with an hour and minute (YYYY-MM-DD hh:mm)

You can use the following JavaScript code to display time in hh:mm format along with a full date format.

<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, 2019 9:18

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

Please follow and like us: