Datepicker for jQuery mobile (Android)

Question

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

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

Mobiscroll http://mobiscroll.com/

Mobi Pick http://mobipick.sustainablepace.net/demo.html

Datebox and Mobiscroll look more mature, but the mobile selection feels faster.

Also I heard that there are certain phones (Android) where mobiscroll does not work?

Answer 1

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

Datebox

I found some problems with Datebox processing on my previous Android phone (Galaxy S2), except that Datebox is close to Mobi Pick (performance potential + configuration potential). The main difference between Datebox and Mobi Pick is the 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 many more options and skins. It can be much better integrated into jQM, and it has a much more responsive interface, unfortunately, it has performance problems on Android 2.X phones (no problems 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 choose Mobi Pick over Mobiscroll if you are satisfied with your interface. If you are not using Mobiscroll.

JsFiddle working example: http://jsfiddle.net/Gajotres/zyVjE/

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

More details

A detailed overview and examples can be found here .

Answer 2

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

Here is how I updated the experimental jqueryui datepicker for mobile:

js bin code snippet

You can reference the datepicker script instead of the whole jqueryui package.

Reading readonly prevents keyboard on ios

It’s just setting up the dumper to work on jqm, the goal would be to override the _generatehtml function of the datepicker widget and be able to give the jquery mobile theme to use as an input theme. Thus, you do not need the whole addClass package and avoid unnecessary manipulations with the DOM.

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

Hope this helps as little as possible if necessary :)

Update:

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

jsbin jqm 1.4.0

It takes into account jQuery mobile 1.4.0 changes and requires a bit less dom manipulation

Answer 3

what about jQuery UI Datepicker designed for mobile ?

Answer 4

I chose Datebox for my project - MobiPick looks beautiful, but does not have a calendar. Datebox also has some really good internationalization options. In terms of features, Datebox simply has more modes of operation than other things that were suggested here (duration, calendar, slide, user modes).