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.

I've had really good luck with this jquery plugin http://trentrichardson.com/examples/timepicker/. It's fairly easy to mod too if you need to. It works with the existing date picker. — scrappedcola, Oct 18 '12 at 17:45
@scrappedcola -- I agree, that plugin is great to work with. However, I can't find any examples of a more 'iPhone' like timepicker. I need to be able to pick the time by 'toggling' through the hours, minutes and am/pm. If I could somehow get that to work with this plugin that'd be amazing! — streetlight, Oct 18 '12 at 17:46
Has no one else out there run into the same issue? Please help! — streetlight, Oct 18 '12 at 18:03

score 2 · Accepted Answer · answered Oct 19 '12 at 09:23

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.

Thank you for your input! After trying the solution, I decided to persuade the client into datetimepicker. Thank you for your solution though! — streetlight, Oct 23 '12 at 13:31
For some reason, when you type in the year, the mobiscroll disappears. Is there a workaround / solution for this as well? — Zubzob, Nov 20 '13 at 14:24

Rolling time picker in jQuery UI Datepicker?

1 Answers1