先放张效果图：
完整Demo：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>测试</title> <link href="../JScripts/MobileDate/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css"/> <link href="../JScripts/MobileDate/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" /> <link href="../JScripts/MobileDate/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css"/> <!-- jQuery Include --> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="../JScripts/MobileDate/mobiscroll.core-2.5.2.js" type="text/javascript"></script> <script src="../JScripts/MobileDate/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script> <script src="../JScripts/MobileDate/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script> <script src="../JScripts/MobileDate/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script> <script type="text/javascript"> function BindMobDate(obj) { //显示日历框，调用前，需要引入库文件 var currYear = (new Date()).getFullYear(); var opt={}; opt.date = {preset : 'date'}; opt.datetime = {preset : 'datetime'}; opt.time = {preset : 'time'}; opt.default = { theme: 'android-ics light', //皮肤样式 display: 'modal', //显示方式 mode: 'scroller', //日期选择模式 lang:'zh', startYear:currYear - 70, //开始年份 endYear:currYear + 0 //结束年份 }; $(obj).val('').scroller('destroy').scroller($.extend(opt['date'], opt['default'])); } $(function() { //调用一次即可 BindMobDate($("#btn1")); }); </script> </head> <body> 出生日期：<input type="text" id="btn1" value=""/> </body> </html>
说明：
需要用到插件mobiscroll.datetime-2.5.1.js 下载地址：滚动日历弹框插件