How to add clock in View of MVC

Question

I have the following lines of html code in jquery mobile header to display time. It is static now as it refreshes only when page is refreshed. How I can periodically update the time without page refresh ?

<div id="updateTime">
    <span>@DateTime.Now.ToShortDateString()</span><br />
    @{
        CultureInfo ci = new CultureInfo("en-US");
        string formatedDate = DateTime.Now.ToString("t", ci);
    }
</div>

This was answered already here: http://stackoverflow.com/questions/5091888/how-to-update-time-regularly. You will need to use javascript and the setInterval function. — Matt, Aug 04 '14 at 13:42

score 0 · Answer 1 · answered Jul 25 '15 at 00:37

I've used jClock in previous project and it's always worked well: https://github.com/dsparling/jclock

After installing the plugin js file you can call it like this:

$(document).ready(function () {
    $('.jclock').jclock({format: '%I:%M:%S %p'});
});

Sample Styling:

.jclock
{
    background-color:Navy;  color: #ffffff;
    font-weight: bold;
    font-size: 64pt;
    text-align: center;
    height: 100px;
    text-shadow: 2px 2px 2px #fff;
    border-radius: 15px 15px 0px 0px; 
    -moz-border-radius: 15px 15px 0px 0px; 
    -webkit-border-radius: 15px 15px 0px 0px;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

How to add clock in View of MVC

1 Answers1