How To Create Changeable Date And Time Using JavaScript?

You can create a changeable Date and Time using JavaScript Date object. JavaScript Date object will automatically hold the current date and time as its initial value. You can manipulate it easily by using different methods in Date object. The different methods in Date object I am going to use to create changeable Date and Time are as follows.

Date(): Returns today’s date and time.
getDate(): Returns the day of the month from a Date object from 1-31.
getDay(): Returns the day of the week from a Date object from 1-6
getMonth(): Returns the month from a Date object from 0-11
getFullYear(): Returns the year, as a four-digit number from the Date object.
getHours(): Returns the hour of a Date object from 0-23.
getMinutes(): Returns the minutes of a Date object from 0-59
getSeconds(): Returns the seconds of a Date object from 0-59

Read Also: How to Loop using JavaScript?

Do rest of the work you have to create a new Date() object and needs to use that value to get the date, month, day name and time with hours, minutes and seconds. You can create variables for the day, month and year as follows.

var now=new Date();
var today=now.getDate();
var month=now.getMonth();
var year=now.getFullYear();
var day=now.getDay();

You can create variables for hours, minutes and seconds as follows.

var now=new Date();
var hours=now.getHours();
var minutes=now.getMinutes();
var seconds=now.getSeconds();

After getting month and day in number format, you can change it into the name of the month and day by using the arrays as follows.

Table of Contents

Full HTML Code to Create Changeable Date

Here is a full HTML code to create a changeable date, you can use these codes to display full date or you can customize to display in different formats on your web page.

<html>
<body>
<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]="Septmber ";
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 ";

document.write(monthname[month]+today+  ",   "+year+  "  "+dayname[day]);
}
window.onload=displayDate();
</script>
</body>
</html>

Preview

Full HTML Code to Create Changeable Time

Here is a full HTML code to create changeable time, you can use these codes to display full time or you can customize to display in different formats on your web page. You can use these codes to create a digital clock using JavaScript, which I have already posted in my previous post.

<html>
<head></head>
<body>
<script type="text/javascript">
function startTime(){
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
var ap="AM";
//to add AM or PM after time
if(h>11) ap="PM";
if(h>12) h=h-12;
if(h==0) h=12;
//to add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('clock').innerHTML=h+":"+m+":"+s+" "+ap
t=setTimeout('startTime()', 500)
}
function checkTime(i){
if (i<10)
{ i="0" + i}
return i
}
window.onload=startTime;
</script>
<div id="clock"></div>
</body>
</html>

Preview

Read Next: How to Write JavaScript With HTML?

Please follow and like us: