Use cases are rare but displaying the live time on a webpage is a neat feature, perhaps for a dashboard or panel would it suit best.
There is no need for Jquery just pure vanilla JavaScript and some defined HTML spans.
Base code is 12 hour time with AM/PM and the date says the day (name), month and day (number). These of course can be changed.
HTML elements to display the live time and date:
<span class="hours_mins_secs"></span> <span class="am_pm"></span> <br> <span class="date"></span>
And the JavaScript code is:
function liveTime() { var dateInfo = new Date(); var hr, _min = (dateInfo.getMinutes() < 10) ? "0" + dateInfo.getMinutes() : dateInfo.getMinutes(), //If less than 10 add 0 onto front 1 -> 01 sec = (dateInfo.getSeconds() < 10) ? "0" + dateInfo.getSeconds() : dateInfo.getSeconds(), am_pm = (dateInfo.getHours() >= 12) ? "PM" : "AM"; //Decide if AM or PM if (dateInfo.getHours() == 0) { //24hr to 12 hour calculations hr = 12; } else if (dateInfo.getHours() > 12) { hr = dateInfo.getHours() - 12; } else { hr = dateInfo.getHours(); } var currentTime = hr + ":" + _min + ":" + sec; document.getElementsByClassName("hours_mins_secs")[0].innerHTML = currentTime; //hh:mm:ss element document.getElementsByClassName("am_pm")[0].innerHTML = am_pm; //AM or PM element var day_name = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], month = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], day = dateInfo.getDate(); var currentDate = day_name[dateInfo.getDay()] + ", " + month[dateInfo.getMonth()] + " " + day; //replaces int with string. Day = 2 is Tuesday document.getElementsByClassName("date")[0].innerHTML = currentDate; //Date element }; liveTime(); setInterval(function() { liveTime() }, 1000); //1 second updates