CODEWITHSUNDEEP
javascriptjquerymomentjs
randomuser1
randomuser1

Reputation: 2803

Moment.js: how to update the time every minute?

I'm using moment.js to display time on my webpage. I have the html div:

<div id="time"></div>

and the following javascript:

<script>
    moment.tz.add('America/New_York|EST EDT|50 40|0101|1Lz50 1zb0 Op0');                                                                         
    var newYork = moment.tz("America/New_York").format('HH:mm a');
    $('#time').append( "Current time in New York: "+newYork );
</script>

When I run the page, it gives me the correct time, but it doesn't change with every minute, so even after 10 minutes or so I get the time that was visible when I loaded the page. Is there any way to keep the time updated? Here's my fiddle so far: http://jsfiddle.net/93pEd/132/

Upvotes: 4

Views: 9970

Answers (2)

ETNyx
ETNyx

Reputation: 190

Google point me to this question, want to share mine solution for slightly different case, but fundamentally same, based on selected solution here (thanks). This solution fix gap between start and new minute (pointed by Taplar at May 6 '15 under initial post).

$(document).ready(function(){
  if ($('.world-time').length) {
  	$('.world-time').each(function () {
  		updateWorldTime($(this));
  	});
  }

  function updateWorldTime(el) {
  	var tz = el.data('tz');
  	var timeToUpdate = parseInt(moment().tz(tz).format('s'));
  	timeToUpdate = (((60 - timeToUpdate) * 1000));
  	el.html(moment().tz(tz).format('HH:mm'));
    
    $('.update').html((timeToUpdate / 1000));
    $('.time').html(moment().format('HH:mm:ss,SS'));

	  setTimeout(function () {
  		updateWorldTime(el);
  	}, timeToUpdate);
  }
 });
<span>Los Angeles: <strong data-tz="America/Los_Angeles" class="world-time">12:19</strong></span>
<span>New York: <strong data-tz="America/New_York" class="world-time">15:19</strong></span>
<span>London: <strong data-tz="Europe/London" class="world-time">20:19</strong></span>
<span>Prague: <strong data-tz="Europe/Prague" class="world-time">21:19</strong></span>
<span>Moscow: <strong data-tz="Europe/Moscow" class="world-time">23:19</strong></span>
<span>Hong Kong: <strong data-tz="Asia/Hong_Kong" class="world-time">04:19</strong></span>
<span>Sydney: <strong data-tz="Australia/Sydney" class="world-time">07:19</strong></span>

<br><br>
Wait for it:<br>
Next update in:<span class="update"></span>s.<br>
HH:mm:ss,SS <span class="time"></span><br><br><br>
Note: If snippet doesn't work, propably link to external library doesn't exists anymore (after 2022 this snippet will be broken), sorry. In real case HTML is generated by PHP, timzones from DateTime object fit to moment.js just fine.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="http://momentjs.com/downloads/moment-timezone-with-data-2012-2022.min.js"></script>

Upvotes: 0

Curtis
Curtis

Reputation: 103428

Use setInterval() to run the code every 60 seconds.

Use html() instead of append() so that the previous time is overridden.

function updateTime(){
    var newYork = moment.tz("America/New_York").format('HH:mm a');
   $('#time').html( "Current time in New York: "+newYork );
};

moment.tz.add('America/New_York|EST EDT|50 40|0101|1Lz50 1zb0 Op0');                                                                         

updateTime();
setInterval(function(){
   updateTime();
},60000);

http://jsfiddle.net/93pEd/135/

Heres an example using seconds also:

http://jsfiddle.net/93pEd/136/

Upvotes: 9

Related Questions