How to display time/clock using dojo or dijit?

Question

Basically, I just need to display the current time (hh:mm:ss am/pm format) inside an html input text box. And since this will serve as a clock, the time should continue counting/moving on while it is being displayed.

I can do this in plain javascript, but I would like to see a dojo/dijit implementation.

Thanks!

Answer 1

Here is an example that you may reuse.

You could also implement this on your own, using dojox.timing.Timer .

dojo.require('dojox.timing');
t = new dojox.timing.Timer(1000);
t.onTick = function() {
   //One second elapsed
   var now = new Date();
   //format now using dojo.date.locale.format
   //update your text box with the result
}
t.onStart = function() {
   //Do whatever setup is needed
}
t.start();

A couple of examples for dojo.date.locale.format .

Answer 2

Look at the code below:

var myTime = new dijit.form.TimeTextBox({
    value: new Date()
    constraints: {
        timePattern: 'hh:mm:ss a',
    },
    id: "timeTb"
}, dojo.byId("timeDiv"));

var elem = document.getElementById("timeTb");
setInterval(function(){
    dijit.byId("timeTb").setValue(new Date());
}, 1000);

Answer 3

for the minimalist approach, you could probably just achieve this with an input control and a setTimeout call to dojo.date.locale.format. You don't necessarily need DojoX/Dijit abstractions here, though some of the dojox.timing code can be useful.