Show Real Time, Date, Day of the Week in javascript or jquery

Question

How to show real time, date, day in this format?

enter image description here

The time should be actual (which runs the seconds count).

Thanks guys!

take a look at this example http://jsfiddle.net/fdq5173y/ – Blu Feb 24 '15 at 06:38 — Blu, Feb 24 '15 at 06:38

score 25 · Accepted Answer · answered Feb 24 '15 at 09:12

25

To update time panel every second we should use setInterval() function.

To format date the way you need the best approach is to use moment.js library. The code is shortened greatly:

$(document).ready(function() {
    var interval = setInterval(function() {
        var momentNow = moment();
        $('#date-part').html(momentNow.format('YYYY MMMM DD') + ' '
                            + momentNow.format('dddd')
                             .substring(0,3).toUpperCase());
        $('#time-part').html(momentNow.format('A hh:mm:ss'));
    }, 100);
});

Here is working fiddle

answered Feb 24 '15 at 09:12

Ivan Gerasimenko

2,381
3
30
46

I got moment is not defined error . can you please explain why? – Geordy James Mar 16 '17 at 06:53
I fixed it. Some javascript collision cause error – Geordy James Mar 16 '17 at 07:00

eLemEnt · Answer 2 · 2015-02-24T06:42:48.490

You can use SetInterval in javascript and run it after every 1 second. Look for the given example

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<p id="demonew"></p>
<script>
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
  dd='0'+dd
} 

if(mm<10) {
  mm='0'+mm
} 

today = mm+'/'+dd+'/'+yyyy;
document.getElementById("demonew").innerHTML = today;
var myVar=setInterval(function(){myTimer()},1000);

function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

score 1 · Answer 3 · answered Feb 24 '15 at 07:01

You can use :
  <script>
    var mydate=new Date()
    var year=mydate.getYear()

if (year < 1000)
    year+=1900

var day=mydate.getDay() // Current Day of week - 2
var month=mydate.getMonth() // Current Month 2
var daym=mydate.getDate() // Current Date -24
var h=mydate.getHours(); //Hours
var m=mydate.getMinutes();//Minutes
var s=mydate.getSeconds();//Seconds
m = checkTime(m);
s = checkTime(s);

function checkTime(i) {
    if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
return i;
}

Take 2 arrays

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday",
                        "Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June",
                        "July","August","September","October","November","December")

  document.getElementById('txt').innerHTML =h+":"+m+":"+s+" "+dayarray[day]+", "+montharray[month]+" "+daym+", "+year;

 var t = setTimeout(function(){startTime()},500);
  //This will update time 


 </script>
  <body onload="startTime()">

  <div id="txt"></div>

  </body>

Show Real Time, Date, Day of the Week in javascript or jquery

3 Answers3