jQuery UI & Spinner: Time

This entry is part 2 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Time

A custom widget extending spinner. Use the Globalization plugin to parse and output a timestamp, with custom step and page options.

Cursor up/down spins minutes, page up/down spins hours.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Time</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/jquery.mousewheel.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/globalize.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/globalize.culture.de-DE.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        $.widget('ui.timespinner', $.ui.spinner, {
            options: {
                // seconds
                step: 60 * 1000,
                // hours
                page: 60

            _parse: function (value) {
                if (typeof value === 'string') {
                    // already a timestamp
                    if (Number(value) == value) {
                        return Number(value);
                    return +Globalize.parseDate(value);
                return value;

            _format: function (value) {
                return Globalize.format(new Date(value), 't');

        $(function () {

            $('#culture').change(function () {
                var current = $('#spinner').timespinner('value');
                $('#spinner').timespinner('value', current);

    <label for='spinner'>Time spinner:</label>
    <input id='spinner' name='spinner' value='08:30 PM'>

    <label for='culture'>Select a culture to use for formatting:</label>
    <select id='culture'>
        <option value='en-EN' selected='selected'>English</option>
        <option value='de-DE'>German</option>

Try The Code
Series Navigation<< jQuery UI & Spinner: Basic spinner
jQuery UI & Spinner: Currency >>

Leave a comment

Leave a Reply