Formatting time for local cultures

The spinner widget utilizes the Globalize jQuery project; an effort to standardize on data formats according to the local culture. The spinner widget utilizes this library to format its values. For example, specifying the numberFormat and culture options allow us to use the spinner widget to display currency values according to local culture. However, currency is just one value that we like to format locally; time is another. We can use the built-in Globalize capabilities only to an extent in the spinner widget for displaying time values. A little more work is required on our part to extend the widget to properly allow for time values. In fact, let's create our own time widget, based on the spinner.

How to do it...

First, let's look at the markup required for creating two time widgets in which we'll display the Toronto time and the London time. We're not showcasing the time-zone computation abilities here, simply the fact that we have two different cultures...