display current time

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Tony Groome 261 posts 804 karma points

Jan 13, 2015 @ 16:29

0

Display Current Time

Hi All

Is there a way to display the current time. I have @DateTime.Now but that only updates when I refresh the screen. Is there a way to make it current?

Thanks.

Tony

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Jan 13, 2015 @ 16:45

100

Hi Tony

Do you need to have it update dynamically without a page reload? Like this for instance? http://perishablepress.com/unobtrusive-javascript-dynamic-clock/ Or what do you have in mind?

/Jan

Copy Link
Tony Groome 261 posts 804 karma points

Jan 13, 2015 @ 16:51

0

Hi Jan

That's exactly what I had in mind. Can this be done in Razor or is this the easiest way?

Thanks.

Tony

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Jan 13, 2015 @ 16:53

1

Hi Tony

No it can be done purely in Razor since it's a serverside language. I would recommend using JavaScript purely and the link seems to be a nice tutorial on how to do it.

You could use Razor in to fetch the datetime from the server using an AJAX approach but it seems a bit overkill when you can do it with pure JavaScript.

Hope this helps.

/Jan

Copy Link
Tony Groome 261 posts 804 karma points

Jan 13, 2015 @ 17:05

0

Hi Jan

OK I'll follow the tutorial. Thanks a lot.

Tony

Copy Link
Tony Groome 261 posts 804 karma points

Jan 13, 2015 @ 17:59

0

Hi Jan

I just realised something....where do I put the javascript file? I tried in the scripts folder because it's possible to set the file as a js file and then on the Master template I ran <span id="http://localhost:12718/scripts/clock.js"></span> which doesn't work. Am I miles off?

Thanks.

Tony

Copy Link
Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Jan 13, 2015 @ 18:03
1
Hi Tony,

If you have your script in the script folder in Umbraco, then you should called it like this
```
<script src="/scripts/clock.js" type="text/javascript"></script>
```
Hope this helps,

/Dennis
Copy Link
Tony Groome 261 posts 804 karma points

Jan 13, 2015 @ 18:15

0

Hi Dennis

Thanks, but no joy. The area where I'm expecting the clock is blank, so maybe I'm not calling it correctly.

Tony

Copy Link
Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Jan 13, 2015 @ 18:22
1
Hi Tony,

Okay, I have made a screenshot so you can see where to find the path to file in the script folder. See the screenshot below.

And the way that you include the script is like:
```
<scriptsrc="/scripts/clock.js"type="text/javascript"></script>
```
Hope this helps,

/Dennis
Copy Link
Tony Groome 261 posts 804 karma points

Jan 13, 2015 @ 18:26

0

Thanks Dennis, it's still blank. I'll have another look tomorrow, with fresh eyes and a clear head!

:)

Copy Link
Bjarne Fyrstenborg 1281 posts 3992 karma points MVP 8x c-trib

Jan 13, 2015 @ 18:34
3
Hi Tony

You could also in your razor code use DateTime.Now: http://msdn.microsoft.com/en-us/library/zdtaw1bw%28v=vs.110%29.aspx
```
<span id="time">@DateTime.Now.ToString("yyyy-MM-dd HH:mm")</span>
```
and then use Moment.js to update the time, which trigger for an eventhandler, e.g. click or just after DOM is ready.

if you use jQuery, something like this:
```
$( document ).ready(function() {
    $("#time").text(moment().format("yyyy-MM-dd HH:mm"));
});
```
/Bjarne
Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Jan 13, 2015 @ 20:51
1
Hi Tony

There is no need to create the script within Umbraco if you have access to the disk.

You need to copy the javascript code into a script file, that you can save in the /scripts folder on your disk. You could also have it in /assets/javascript if you would like. It does not matter.

When you save your script file you can save it as "clock.js". Now you need to reference "clock.js" in the bottom of your master template before the ...

so try writing it like this
```
   <body>
   <span id="xClock"></span>
    <script src="/scripts/clock.js"></script>
    </body>
```
Does this make sense? :)

/Jan
Copy Link
Tony Groome 261 posts 804 karma points

Jan 14, 2015 @ 11:03

0

Hi All

Thanks for all the help. What a great community! :)

@Bjarne I don't know jquery, it is something I should probably get on top of, so thanks for the links.

@Jan I added the last bit of code, and hey presto, we have a clock! And it works! I did have a clock before, but it didn't work!!

Thanks.

Tony

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Jan 14, 2015 @ 11:22

1

Hi Tony

Glad you managed to get it working :)

Have fun developing.

/Jan

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?