jQuery mobile(Android)的Datepicker

好的,我之前已经问过这个问题,但是哪个日期选择器最适合jQuery mobile(适用于Android?)

日期框http://dev.jtsage.com/jQM-DateBox2/

Mobiscroll http://mobiscroll.com/

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

Datebox和Mobiscroll看起来更成熟,但mobi选择对我来说感觉更快。

另外我听说有些手机(Android)哪些mobiscroll不起作用?

根据我的经验,你应该选择Mobi Pick和Mobiscroll。

Datebox

我在我之前的Android手机(galaxy S2)上发现了一些Datebox渲染问题,然而Datebox接近Mobi Pick(性能老虎机+配置潜力)。 Datebox和Mobi Pick的主要区别在于最终设计。

工作jsFiddle示例: http : //jsfiddle.net/Gajotres/ktbcP/

 

Mobiscroll

Mobiscroll拥有更多选项和皮肤。 它可以更好地集成到jQM中,并且它具有更好的响应式UI,不幸的是它在2.X安卓手机上存在性能问题(iPhone设备没有问题)。

工作jsFiddle示例: 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

如果你对它的UI外观感到满意,我会选择Mobi Pick over Mobiscroll。 如果你不使用Mobiscroll。

工作jsFiddle示例: http : //jsfiddle.net/Gajotres/zyVjE/

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

更多信息

可以在此处找到详细的概述和示例。

我致力于将jquery ui datepicker更新到jquery,jqueryui和jquery mobile的最新版本,所以对于jq1.9.1 jqui 1.10.2和jqm 1.3.0

这是我如何为手机更新实验性jqueryui datepicker:

js bin代码片段

您可以链接到datepicker脚本而不是整个jqueryui包。

readonly prop防止键盘出现在ios上

它只是对datepicker进行调整以使其在jqm上工作,目标是能够覆盖datepicker小部件的_generatehtml函数,并能够作为输入使用jquery移动主题。 所以你不需要那一堆addClass并避免不必要的DOM操作

我只测试了ios 6(iphone,ipad)和桌面(chrome,firefox,safari),让我们了解其他测试。

希望它有所帮助,因为它需要它:)

更新:

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

jsbin jqm 1.4.0

它考虑到了jquery mobile 1.4.0的变化,需要少量的dom操作

那个为移动设备设计的jQuery UI Datepicker怎么样?

我为我的项目选择了Datebox – MobiPick看起来不错但没有日历。 Datebox还有一些非常好的国际化选项。 在function方面,Datebox的操作模式比此处提出的其他内容(持续时间,日历,幻灯片,自定义模式)更多。