How to display current time with JavaScript without refreshing the page

Question

We are currently displaying timestamp information in our ColdFusion webapp via the following JavaScript function. This function is called when a user clicks an HTML button on the web page. The problem is that the time is only current as of the last page load. So if the user is sitting on the page for a while, the time becomes inaccurate.

Is there a more elegant way to do this in JavaScript that is more accurate? Or is there a way in ColdFusion to pull the server clock information real-time?

HTML Button

<input class="timerStart" id="startButton2" type="button" value="Insert Start Time" onclick="insertAtCaret('messageBody','---Start Time:#DateFormat(Now())# : #TimeFormat(Now())#---');" />

Javascript Code

function insertAtCaret(areaID,text) {
    var txtarea = $("textarea[data-focused=true]")[0];
    if(txtarea!=undefined)
    {
        var scrollPos = txtarea.scrollTop; 
        var strPos = 0; 
        var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
                   "ff" : (document.selection ? "ie" : false ) ); 
        if (br == "ie") { 
            txtarea.focus(); 
            var range = document.selection.createRange(); 
            range.moveStart ('character', -txtarea.value.length); 
            strPos = range.text.length; 
        } 
        else if (br == "ff") {strPos = txtarea.selectionStart;}
        var front = (txtarea.value).substring(0,strPos); 
        var back = (txtarea.value).substring(strPos,txtarea.value.length); 
        txtarea.value=front+text+back; strPos = strPos + text.length; 
        if (br == "ie") { 
            txtarea.focus(); 
            var range = document.selection.createRange(); 
            range.moveStart ('character', -txtarea.value.length); 
            range.moveStart ('character', strPos); 
            range.moveEnd ('character', 0); range.select(); 
        } 
        else if (br == "ff") {
            txtarea.selectionStart = strPos; 
            txtarea.selectionEnd = strPos; 
            txtarea.focus(); 
        } 

        txtarea.scrollTop = scrollPos;
    }
}

I have no idea what all that js code is supposed to do, but I do know that `Date.now()` is a javascript function that returns the current date and time. You can then use the `getHours()` and `getMinutes()` functions and display the results as you see fit. — Dan Bracuk, Jun 08 '20 at 18:31
Does the time really need to match your server time, or are you happy with using the time from the users computer (which on most cases will be correct)? If you are happy with that, you need to sent formatted date string to your JavaScript function, format examples can be found here: https://stackoverflow.com/questions/5416920/timestamp-to-human-readable-format If you really want to use your servers time, you need to create a server side script and pull in the time using an Ajax request. — Maarten Veerman, Jun 08 '20 at 18:33
@MaartenVeerman - Using the time from a user's computer is fine, as long as the time is current. Like I mentioned in my post, the way I am doing it now is only current as of the last page load. — Brian Fleishman, Jun 08 '20 at 19:08

score 1 · Accepted Answer · answered Jun 08 '20 at 20:17

Using the users system time, you can access the current time and date using the JavaScript Date functions.

For example, you may change your code to this:

<input class="timerStart" id="startButton2" type="button" value="Insert Start Time" onclick="insertAtCaret('messageBody','---Start Time: ' + (new Date()).toUTCString() + ' ---');" />

This will not result in the exact same date/time format you had before, but it gives you a start to further work on this topic. To really work with dates, also look at the momentjs library: https://momentjs.com/

How to display current time with JavaScript without refreshing the page

1 Answers1