這是一個(gè)適合移動設(shè)備WEB應(yīng)用的日期和時(shí)間拾取器，在桌面版的日期拾取器我們一般用jQuery UI的datepicker插件，而移動手機(jī)版的日期拾取器則可以根據(jù)項(xiàng)目需求選擇與jQuery Mobile配合的mobiscroll.js插件，它提供了友好的日期和時(shí)間選擇操作界面，且易于配置和使用。
HTML
首先我們加載相關(guān)插件和樣式文件，該插件基于jQuery和jQuery.mobile所以首先需要加載這兩個(gè)庫文件，然后再加載mobiscroll.js插件以及相關(guān)CSS文件。
<script src="js/jquery.min.js"></script> <script src="js/jquery.mobile-1.3.0.min.js"></script> <script src="js/mobiscroll.js" type="text/javascript"></script> <link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
接著在body里放置輸入框，這是一個(gè)普通的文本輸入框，當(dāng)鼠標(biāo)單擊輸入框獲得光標(biāo)時(shí)會觸發(fā)mobiscroll彈出日期拾取器。
<input id="date" name="date" />
JavaScript
mobiscroll提供了許多選項(xiàng)可以設(shè)置，包括定義彈出面板展示方式、最大日期、最小日期、日期格式、結(jié)束年份等，也可以將插件本地化，包括設(shè)置中文按鈕、說明。調(diào)用也非常簡單，以下是示例代碼：
$(function(){ var opt = { preset: 'date', //日期 theme: 'sense-ui', //皮膚樣式 display: 'modal', //顯示方式 mode: 'scroller', //日期選擇模式 dateFormat: 'yy-mm-dd', // 日期格式 setText: '確定', //確認(rèn)按鈕名稱 cancelText: '取消',//取消按鈕名籍我 dateOrder: 'yymmdd', //面板中日期排列格式 dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字 hourText: '時(shí)',minuteText: "分",ampmText:"上午/下午", endYear:2020 //結(jié)束年份 }; $("#date").mobiscroll().date(opt); }); 如果只選是時(shí)間，則可以這樣寫：
$("#time").mobiscroll().time(opt); 如果要在面板上顯示日期和時(shí)間，則這樣調(diào)用：
$("#datetime").mobiscroll().datetime(opt); 源碼下載：javascript適合移動端的日期時(shí)間拾取器
一款簡潔大方的javascript適合移動端的日期時(shí)間拾取器就這樣制作完成了，希望大家喜歡。
新聞熱點(diǎn)
疑難解答
