<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-4"><h2>Date And Time</h2></div> <div class="col-md-8"> <h5 class="py-3 font-weight-bold"><span class="date-text"></span> | <span class="badge badge-warning p-2" id="ct"></span> </h5></div> </div> </div>

function display_c() { var refresh = 1000; // Refresh rate in milli seconds mytime = setTimeout('display_ct()', refresh) } function display_ct() { var timex = new Date(); var time = timex.getHours() + ":" + timex.getMinutes() + ":" + timex.getSeconds(); document.getElementById('ct').innerHTML = time; display_c(); } var today = new Date(); var month = new Array(); month[0] = "January"; month[1] = "February"; month[2] = "March"; month[3] = "April"; month[4] = "May"; month[5] = "June"; month[6] = "July"; month[7] = "August"; month[8] = "September"; month[9] = "October"; month[10] = "November"; month[11] = "December"; var date = today.getDate() + ' ' + (month[today.getMonth()]) + ' , ' + today.getFullYear(); jQuery(document).ready(function () { display_ct(); jQuery(".date-text").text(date); });