Android風格日期選擇Web組件:Mobi Pick

jopen 10年前發布 | 22K 次閱讀 Mobi Pick jQuery日期插件 jQuery插件

Mobi Pick是一款Android風格的日期選擇組件,主要利用了jQuery Mobile腳本庫。Mobi Pick提供了3種不同的日期選擇功能,最簡單的日期選擇功能是選擇年月日,另外一種是可以自定義修改年月日,還有一種是可以下拉選擇日期。由于Mobi Pick有著Android的風格樣式,因此外觀相當漂亮。

android-mobi-pick.png

這里以最簡單的例子來說,可以通過以下步驟來使用Mobi Pick。

先是引入必要的腳本:

<link rel=”stylesheet” type=”text/css” href=”css/mobipick.css” />
<script type=”text/javascript” src=”external/xdate.js”></script>
<script type=”text/javascript” src=”external/xdate.i18n.js”></script>
<script type=”text/javascript” src=”js/mobipick.js”></script>

然后在頁面上創建一個input元素:

<input type=”text” />

最后初始化:

$( document ).on( “pagecreate”, pageselector, function() {
var picker = $( “input[type='text']“, this );
picker.mobipick();
});

日期選中發生變化后的事件處理函數:

picker.on( “change”, function() {
// formatted date, like yyyy-mm-dd
var date = $( this ).val();

// JavaScript Date object
var dateObject = $( this ).mobipick( “option”, “date” );
});

Mobi Pick是完全開源的,如果你的移動網頁中需要日期選擇功能,那么它將會是一個不錯的選擇。

本文鏈接:http://www.codeceo.com/article/android-mobi-pick.html
本文作者:碼農網 – 小峰

項目主頁:http://www.baiduhome.net/lib/view/home/1413183351171

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!