標籤：
最近在寫端的頁面，要用到日期控制項，得知其內建瀏覽器支援HTML5的時候，我笑了(so easy~)，<input type="date" />兩秒鐘搞定。然後找了三種機型，你是不是猜到了已經？！沒錯，Android，iPhone，winphone，，，奇葩的winphone內建瀏覽器竟然是IE。醉了，瘋狂搜尋，找到一篇部落格mobiscroll，照著敲下來都達不到人家的效果，搞了半天，終於，，，實現了哈哈。
說到這，有人就要罵了，你傻逼啊，為啥不用jquery mobile呢？呵呵，當你想選擇25號的時候，你等到26號去選了（太卡，直接pass）
上邊這倆也太醜了，官網有更好看的~
下面開始跟人家做吧：
第一步：到官網去下載個壓縮包，下載需要先註冊然後才能下載。下載的時候你可以選擇你使用的架構及皮膚樣式等，看
到此假設你已經成功註冊並下載啦
第二步、建立一個HTML5檔案，引jquery.js,jquerymobile.js 等等（等等是什麼鬼？）必須的檔案，編寫如下代碼到你的檔案中：
<div data-role="fieldcontain"> <label for="txtBirthday">出生日期：</label> <input type="text" data-role="datebox" id="txtBirthday" name="birthday" /> </div>
我們可以這樣去初始化日期控制項：
$(‘input:jqmData(role="datebox")‘).mobiscroll().date();
預覽下吧，是不是可以使用了呢！唯獨這個介面是英文的，對於國人來說多少有點不爽，而官網又沒有提供中文語言套件，但沒有關係，官網的API還是不錯的，我們可以設定一些常用的屬性使之符合常規的日期格式。
//初始化日期控制項 var opt = { preset: ‘date‘, //日期 theme: ‘jqm‘, //皮膚樣式 display: ‘modal‘, //顯示方式 mode: ‘clickpick‘, //日期選擇模式 dateFormat: ‘yy-mm-dd‘, // 日期格式 setText: ‘確定‘, //確認按鈕名稱 cancelText: ‘取消‘,//取消按鈕名籍我 dateOrder: ‘yymmdd‘, //面板中日期排列格式 dayText: ‘日‘, monthText: ‘月‘, yearText: ‘年‘, //面板中年月日文字 endYear:2020 //結束年份 }; $(‘input:jqmData(role="datebox")‘).mobiscroll(opt);
這樣就OK啦 看下吧
到這如果你跟我一樣的智商，沒寫出來。。。就繼續看下面的吧。。。(最煩那些不把所有代碼貼出來的部落格了)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> 6 <title>mobiscroll-中文-日期選擇</title> 7 <link href="css/mobiscroll.frame.css" rel="stylesheet" type="text/css" /> 8 <link href="css/mobiscroll.frame.android-holo.css" rel="stylesheet" type="text/css" /> 9 <link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />10 <link href="css/mobiscroll.android-holo-light.css" rel="stylesheet" type="text/css" />11 </head>12 <body>13 <div style="text-align: center;">14 <label for="date">mobiscroll-中文-日期選擇</label><br />15 <input type="text" id="date" /> 16 </div>17 18 <script src="js/zepto.min.js"></script>19 <script src="js/mobiscroll.zepto.js"></script>20 <script src="js/mobiscroll.core.js"></script>21 <script src="js/mobiscroll.frame.js"></script>22 <script src="js/mobiscroll.scroller.js"></script>23 <script src="js/mobiscroll.util.datetime.js"></script>24 <script src="js/mobiscroll.datetimebase.js"></script>25 <script src="js/mobiscroll.datetime.js"></script>26 <script src="js/mobiscroll.android-holo-light.js"></script>27 <script src="js/i18n/mobiscroll.i18n.zh.js"></script>28 <script type="text/javascript">29 $(function(){30 $(‘#date‘).mobiscroll().date({31 theme: "android-holo-light", 32 mode: "scroller", 33 display: "bottom",34 lang: "zh" 35 });36 });37 </script>38 </body>39 </html>
臥槽這麼多檔案，你讓我去哪下載啊，，別急別急。。。在這兒呢。。。
戳 =》我
移動端日期控制項
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
