Rolling time picker in jQuery UI Datepicker?

Question

I'm working on a project in which I'm using jQuery's UI Datepicker heavily. However, one of the fields requires a time as well, and the client would like to use an iPhone-like timepicker in addition to the original date picker. (Otherwise, I'd use this -- http://trentrichardson.com/examples/timepicker/ -- which is brilliant but doesn't have the visual style needed.)

I found this plugin -- http://demo.mobiscroll.com/#demo=time&mode=mixed&display=inline&theme=jqm -- and I'm working on somehow integreating it with the jQuery UI plugin, placing it under the calendar table and somehow sending the data from this in addition to the date pushed from the datepicker.

Here is my datepicker initilization code:

<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.18.custom.min.js"></script>

function datepickerAdd() {
        $('input[name=valueTextField]').addClass('datepicker');

            $( ".datepicker" ).datepicker({
                defaultDate: "+1w",
                maxDate: "0d+",
                dateFormat: "m/d/yy"
                });

                $(function(){
                    $('#i').scroller({
                        preset: 'time',
                        theme: 'jqm',
                        display: 'inline',
                        mode: 'mixed'
                    });    
                });

            $('.datepicker').datepicker().bind('click keyup', function() {
                if ($('#ui-datepicker-div :last-child').is('table'))
                    $('#ui-datepicker-div').append('<input id="i" name="i" style="display:none" />');
            });
    }

I can of course include other scripts, I just placed my jquery library up there so they don't get confused with one another.

Can anyone out there help or have an easy selection? If it's not mobiscroll, that's fine as well, just something that allows you to either scroll or use arrows to move the time around is fine.

Answer 1

Your mobiscroll initialization is in a wrong place ( is not in the DOM yet. Here is a proposed solution:

function addTimePicker() {
    setTimeout(function() {
        if ($('#ui-datepicker-div :last-child').is('table'))
            $('<div id="mobiscroll"></div>').appendTo($('#ui-datepicker-div')).scroller({
                preset: 'time',
                theme: 'ios',
                display: 'inline'
            });
    }, 10); 
}

$('#test').datepicker({
    defaultDate: "+1w",
    maxDate: "0d+",
    dateFormat: "m/d/yy",
    onSelect: function(dateText) {
        alert('Time: ' + $.scroller.formatDate('hh:ii A', $('#mobiscroll').scroller('getDate')));
    },
    beforeShow: addTimePicker,
    onChangeMonthYear: addTimePicker // when changing month, mobiscroll must be re-initialized
});

​ Although this seems a messy solution, i wouldn't mix jquery UI timepicker with mobiscroll. Mobiscroll has datetimepicker as well, or stick to the proposed datetimepicker for jquery UI.