jquery移動端日期插件


不說多的,直接看代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="gbk"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title>Mobiscroll</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> <!--Includes--> <link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" /> <script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var opt = { preset: 'date', //日期 theme: 'sense-ui', //皮膚樣式 display: 'modal', //顯示方式 mode: 'scroller', //日期選擇模式 dateFormat: 'yy-mm-dd', // 日期格式 setText: '確定', //確認按鈕名稱 cancelText: '取消',//取消按鈕名籍我 dateOrder: 'yymmdd', //面板中日期排列格式 dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字 endYear:2020 //結束年份 }; $("#scroller").mobiscroll(opt).date(opt); //之前給群里共享發錯了。記得之前寫過一個,估計丟了。現在重寫一個。並完善一下,下面注釋部分是上面的參數可以替換改變它的樣式 //希望一起研究插件的朋友加我個人QQ也可以,本人也建個群 291464597 歡迎進群交流。哈哈。這個不能算廣告。 // 直接寫參數方法 //$("#scroller").mobiscroll(opt).date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' }); //具體參數定義如下 //{ //preset: 'date', //日期類型--datatime, //theme: 'ios', //皮膚其他參數【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】 //【wp light】【wp】 //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】 //display: 'bubble', //顯示方【modal】【inline】【bubble】【top】【bottom】 //dateFormat: 'yyyy-mm-dd', // 日期格式 //setText: '確定', //確認按鈕名稱 //cancelText: '清空',//取消按鈕名籍我 //dateOrder: 'yymmdd', //面板中日期排列格 //dayText: '日', //monthText: '月', //yearText: '年', //面板中年月日文字 //startYear: (new Date()).getFullYear(), //開始年份 //endYear: (new Date()).getFullYear() + 9, //結束年份 //showNow: true, //nowText: "明天", // //showOnFocus: false, //height: 45, //width: 90, //rows: 3} }); </script> </head> <body> <input id="scroller" name="scroller" /> 親們,覺得日期界面不漂亮,看代碼。我都寫上每個參數的具體注釋了。再看不懂,我也沒辦法了。 </body> </html>

插件文檔參考地址:https://docs.mobiscroll.com/2-5-2/calendar#opt-marked

附上代碼:
mobiscroll-2.5.2-IncreasedChineseSupport.zip
PluginDatetime.zip

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM