//another option is at http://perifer.se
(function($) {
    $.fn.timepicker = function() {
        function input(name, val) {
            return $('<input type="text" name="' + name + '" class="' + name + '" value="' + val + '" />');
        }
        var today = new Date();
        var h = today.getHours();

        var hour = input('hour', today.getHours());
        var minute = input('minute', today.getMinutes());
        //var seconds = input('seconds', today.getHours());
        var ampm = $('<div class="ui-spinner"><input type="text" name="ampm" class="ampm" value="AM" /><a href="#" class="ui-spinner-up">increment</a><a href="#" class="ui-spinner-down">decrement</a></div>');

        ampm.find('a').click(function() {
            var thisInput = $(this).parent().find('input');
            thisInput.val((thisInput.val() == 'AM') ? 'PM': 'AM').focus();
        });

        var tp = $('<div class="ui-timepicker ui-component ui-component-content ui-clearfix"></div>');
        tp.append(hour).append('<span class="colon">:</span>').append(minute).append(ampm);
        hour.spinner({
            min: 1,
            max: 12
        });
        minute.spinner({
            min: 0,
            max: 60
        });

        tp.find('input').focus(function() {
            tp.find('a').hide();
            $(this).parent().find('a').show();
        });

        tp.find('a').addClass('ui-default-state').hover(
        function() {
            $(this).addClass('ui-hover-state');
        },
        function() {
            $(this).removeClass('ui-hover-state');
        }
        ).mousedown(function() {
            $(this).addClass('ui-active-state');
        }).mouseup(function() {
            $(this).removeClass('ui-active-state');
        });

        tp.find('a.ui-spinner-up').html('<span class="ui-arrow-up-default"></span>');
        tp.find('a.ui-spinner-down').html('<span class="ui-arrow-down-default"></span>');
        $(this).after(tp);
        tp.find('button:gt(1)').hide();
        return this;
    }
})(jQuery);