Datepicker for jQuery mobile (Android)

Question

Okay, I know this question has been asked before, but which date picker is best for jQuery mobile (for Android?)

Datebox http://dev.jtsage.com/jQM-DateBox2/

Answer 1

what about the jQuery UI Datepicker styled for mobile?

Answer 2

From my experience you should choose between Mobi Pick and Mobiscroll.

Datebox

I found some Datebox rendering problems on my previous android phone (galaxy S2), other then that Datebox is close to Mobi Pick (performance vise + configuration potential). Main difference between Datebox and Mobi Pick is final design.

Working jsFiddle example: http://jsfiddle.net/Gajotres/ktbcP/

<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>

Mobiscroll

Mobiscroll has much more options and skins. It can be much better integrated into jQM and it has much better responsive UI, unfortunately it has performance problems on 2.X android phones (no problem with iPhone devices).

Working jsFiddle example: http://jsfiddle.net/Gajotres/WDjfR/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#demo').mobiscroll().date({
        invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
        theme: 'android-ics',
        display: 'inline',
        mode: 'scroller',
        dateOrder: 'dd mm yy',
        dateFormat : "dd-mm-yy"
    });  
});

Mobipick

I would pick Mobi Pick over Mobiscroll in case you are satisfied with its UI look. If you are not use Mobiscroll instead.

Working jsFiddle example: http://jsfiddle.net/Gajotres/zyVjE/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#demo').mobipick({
        dateFormat: "MM-dd-yyyy"
    });
});

More info

Detailed overview and examples can be found here.

Answer 3

I chose Datebox for my project - MobiPick is nice looking but has no calendar. Datebox also has some really nice internationalization options. In terms of features Datebox just has way more modes of operation than the other stuff that has been proposed here (duration, calendar, slide, custom modes).

Answer 4

I worked on updating the jquery ui datepicker to latest versions of jquery , jqueryui and jquery mobile so for jq1.9.1 jqui 1.10.2 and jqm 1.3.0

here it is how i updated the experimental jqueryui datepicker for mobile :

js bin code snippet

You can link to the datepicker script instead of the whole jqueryui package.

The readonly prop prevents the keyboard to appear on ios

It is just a tweak of the datepicker to make it work on jqm, the goal would be to be able to override the _generatehtml function of datepicker widget and being able to give as input te jquery mobile theme to use. So you'll not need that whole bunch of addClass and avoid unnecessary DOM manipulation

I only tested for ios 6 (iphone, ipad) and desktop (chrome, firefox, safari), let us know about other tests.

Hope it helps as mush as needed it :)

Update :

• Jquery mobile 1.4.0 alpha 2
• Jquery 2.0.3
• Jqueryui 1.10.3

jsbin jqm 1.4.0

It is taking account of changes of jquery mobile 1.4.0 and needs a little bit less of dom manipulation