There’s some programmer joke that says there are two things hard in computer science: naming things and time zones. On second thought, maybe that’s not the joke at all (because it sounds too true to be funny).

Whatever. The point of this post isn’t to try to make jokes, but to share something useful for working with time zones in the context of JavaScript.

Specifically, I’m talking about Timedropper. It’s a cool jQuery time plugin designed to make it easy for you to implement options into your web application that gives users an intuitive way to work with time.

jQuery Time Plugin

There’s not much to share with the project’s homepage (although I will say that I’m a big fan of the design and layout of the page).

Timedropper - a jQuery Time Plugin

It simply shows you how to get started:

  1. include the plugin,
  2. include the stylesheet,
  3. write your own JavaScript

You can see a full, interactive demo on the front-page. The demo shows several cases in how it can be used. It also shows how it supports both 12-hour and 24-hour formats.

Furthermore, the plugin supports more than just “dragging an element around” to set the time. The options also include:

  • defining an auto switch for changing the hour-minute (or minute-hour) on mouseup,
  • allowing you to set if a mouse wheel will adjust the time,
  • adjust the animation (depending how much you’re a fan of it),
  • set the time of the clock to the current time as the starting place for the time dropper.

There are also options for styles such as setting the text color, background color, and the border color.

Overall, this is a solid plugin. It works well on desktops as well as mobile devices, and I can see how this could be implemented well in the right context. That said, others may try to implement in a place where it doesn’t necessarily belong or fit (the WordPress Admin comes to mind).

So, as with anything like this, be considerate of where and how you use it.

For those who are interested, you can check out the source code on GitHub. Along the same lines, the developers also have a Datedropper plugin which is a nice companion plugin or alternative option if you’re looking to use dates rather than times.