// 时间选择 var currYear = (new Date()).getFullYear() var opt_data = { preset: \'date\', //日期 theme: \'android-ics light\', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【wp light】【wp】 display: \'modal\', //显示方式 mode: \'mixed\', //操作方式【scroller】【clickpick】【mixed】 dateFormat: \'yy-mm-dd\', // 日期格式 setText: \'确定\', //确认按钮名称 cancelText: \'取消\',//取消按钮名籍我 dateOrder: \'yymmdd\', //面板中日期排列格式 yearText: \'年\', monthText: \'月\', dayText: \'日\', //面板中年月日文字 endYear:2020, //结束年份 showNow:true, nowText:\'今天\', hourText:\'小时\', minuteText:\'分\', startYear:currYear, display:\'bottom\',//显示方式【modal】【inline】【bubble】【top】【bottom】 }; $("#demos").mobiscroll(opt_data);
插件的css和js
https://files.cnblogs.com/xinlinux/mobiscroll.custom-2.13.2.min.css
https://files.cnblogs.com/xinlinux/mobiscroll.custom-2.13.2.min.js
http://www.helloweba.com/
<!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> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!--<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/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>--> <!-- <link href="https://files.cnblogs.com/xinlinux/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" /> --> <link href="http://www.wglong.com/index/demos/mobiscroll/css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" /> <script src="http://www.wglong.com/index/demos/mobiscroll/js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script> <link href="css/mobiscroll.custom-2.13.2.min.css" rel="stylesheet" type="text/css" /> <script src="js/mobiscroll.custom-2.13.2.min.js" type="text/javascript"></script> </head> <body> <input id="demos" name="scroller" /> <script type="text/javascript"> var currYear = (new Date()).getFullYear() var opt_data = { preset: \'date\', //日期 theme: \'android-ics light\', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【wp light】【wp】 display: \'modal\', //显示方式 mode: \'mixed\', //操作方式【scroller】【clickpick】【mixed】 dateFormat: \'yy-mm-dd\', // 日期格式 setText: \'确定\', //确认按钮名称 cancelText: \'取消\',//取消按钮名籍我 dateOrder: \'yymmdd\', //面板中日期排列格式 yearText: \'年\', monthText: \'月\', dayText: \'日\', //面板中年月日文字 endYear:2020, //结束年份 showNow:true, nowText:\'今天\', hourText:\'小时\', minuteText:\'分\', startYear:currYear, display:\'bottom\',//显示方式【modal】【inline】【bubble】【top】【bottom】 }; $("#demos").mobiscroll(opt_data); /** $(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> </body> </html>