https://www.mobiscroll.com/
https://github.com/xfhxbb/LCalendar
温馨提示：强烈建议使用：https://github.com/zhoushengmufc/iosselect
不建议使用 demo下载链接：http://download.csdn.net/detail/cometwo/9376336 mobiscroll 扩展：http://download.csdn.net/detail/cometwo/9376397
上一个国产轻量级的：http://download.csdn.net/detail/cometwo/9394560
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>手机时间选择</title> <meta content="initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport"> <meta name="apple-touch-fullscreen" content="YES"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="Expires" content="-1"> <meta http-equiv="pragram" content="no-cache"> <link rel="stylesheet" rel="external nofollow" href="css/reset.css" /> <link rel="stylesheet" rel="external nofollow" href="css/bootstrap.min.css" /> <link rel="stylesheet" rel="external nofollow" href="css/common.css" /> <link rel="stylesheet" rel="external nofollow" href="css/info_self.css" /> <script src="js/jquery-1.11.1.min.js"></script> <!--手机日期--> <script src="js/mobiscroll.core-2.5.2.js" type="text/javascript"></script> <script src="js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script> <link rel="external nofollow" href="css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" /> <link rel="external nofollow" href="css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" /> <script src="js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script> <script src="js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script> <!-- S 可根据自己喜好引入样式风格文件 --> <script src="js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script> <link rel="external nofollow" href="css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" /> </head> <script type="text/javascript"> $(function() { var currYear = (new Date()).getFullYear(); var opt = {}; opt.datetime = { preset: 'datetime' }; opt.default = { theme: 'android-ics light', //皮肤样式 display: 'modal', //显示方式 ：modal（正中央） bottom（底部） mode: 'scroller', //日期选择模式 lang: 'zh', startYear: currYear - 5, //开始年份currYear-5不起作用的原因是加了minDate: new Date() endYear: currYear + 5, //结束年份 //minDate: new Date() //加上这句话会导致startYear:currYear-5失效，去掉就可以激活startYear:currYear-5, }; $("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default'])); var optDateTime = $.extend(opt['datetime'], opt['default']); $("#appDateTime1").mobiscroll(optDateTime).datetime(optDateTime); }); </script> <body> <h1>之所以可以显示上下午是修改了源文件mobiscroll.datetime-2.5.1-zh.js</h1> <dd class="info_list mt10"> <span class="inDis lable_tit" style="color: red;font-size: 25px;">时间选择</span> <div class="inDis input_w"> <input type="text" required name="VisitTime" id="appDateTime1" class="select_w" /> <i class="red">*</i> </div> </dd> <h2>修改后的文件</h2> <pre> (function ($) { $.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh, { dateFormat: 'yyyy-mm-dd', dateOrder: 'yymmdd', dayNames: ['周日', '周一;', '周二;', '周三', '周四', '周五', '周六'], dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'], dayText: '日', hourText: '时', minuteText: '分', monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], monthText: '月', secText: '秒', timeFormat: 'HH:ii', timeWheels: 'HHii', yearText: '年', ampmText:'上午/下午', timeFormat: 'A', timeWheels: 'A' }); })(jQuery); </pre> <h2>未修改的文件</h2> <pre> (function ($) { $.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh, { dateFormat: 'yyyy-mm-dd', dateOrder: 'yymmdd', dayNames: ['周日', '周一;', '周二;', '周三', '周四', '周五', '周六'], dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'], dayText: '日', hourText: '时', minuteText: '分', monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], monthText: '月', secText: '秒', timeFormat: 'HH:ii', timeWheels: 'HHii', yearText: '年' }); })(jQuery); </pre> <h2>mobiscroll简单配置参数</h2> <pre> //下面注释部分是上面的参数可以替换改变它的样式 //希望一起研究插件的朋友加我个人QQ:1010305129也可以，本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。 // 直接写参数方法 //$("#scroller").mobiscroll(opt).date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' }); //具体参数定义如下 //{ //preset: 'date', //日期类型--datatime --time, //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, //minDate: new Date() 从当前年，当前月，当前日开始} </pre> </body> </html>
配置API //下面注释部分是上面的参数可以替换改变它的样式 //希望一起研究插件的朋友加我个人QQ:1010305129也可以，本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。 // 直接写参数方法 //$("#scroller").mobiscroll(opt).date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' }); //具体参数定义如下 //{ //preset: 'date', //日期类型--datatime --time, //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, //minDate: new Date() 从当前年，当前月，当前日开始}
转载于:https://www.cnblogs.com/Byme/p/7611455.html