Hacking Weather Widget Hacking

Published 13 years, 3 months ago

John Gruber just posted a great article on how to take the Weather Dashboard widget in Tiger and hack it to add a “last updated” time.  It’s not only useful, but it’s also a wonderful introduction to the simplicity of widgets.  If you can hack on XHTML, CSS, and JavaScript—as I expect most visitors to this site can—then you can alter or create a Dashboard widget.

However, there was one thing I didn’t like about John’s hack: he converted the 24-hour time already stored by the widget into 12-hour AM/PM time.  I prefer 24-hour time, as do most people outside the United States (which I am not, but never mind that now), and sticking to 24-hour time makes the script addition even simpler.  So here’s my quick modification of John’s JavaScript to result in a time like “1450” instead of “2:50 pm” or “0307” instead of “3:07 am”.

// Format the time of the last data refresh
var h = object.time.hour;
var m = object.time.minute;
if (h < 10) {
   h = '0' + h;
}
if (m < 10) {
   m = '0' + m;
}
document.getElementById('updatetime').innerText =
   h + m;

Other than that, do everything just like John says to do.  Share and enjoy!


  1. And if you prefer to leave in the “:” with the 24-hour display, change the last line to:

    h + ‘:’ + m;

    Anyway, thanks Eric (and John)!

  2. But does it work in metric time?

  3. I think most of us guys in the UK prefer 12 hour time too.

  4. I’m in the UK, and I much prefer the 24 hour clock.

    However, that’s because when I was younger I spent most of my time lying in front of the fire watching TV, and got my time from the VCR…

  5. Rather than display the date in 24-hour format, why not instead show something like “18 minutes ago”? Instructions and details here:
    http://hartshorne.ca/2005/07/25/more_weather_hacking/

Leave a Comment

Management reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand. HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>


Comment Preview

If you're satisfied with what you've written, then go ahead...