一、概述
本实例特效代码是一款依赖于jq,iScroll滑动插件，效果偏向于手机移动端的，所以请用支持HTML5+CSS3主流浏览器预览效果，手机查看效果更佳哦。（兼容测试：FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器）
样式不附加任何图片，能自动定位到当前系统日期。修复了以前在网络上下载下来了好几个BUG。大家如果喜欢可以去文章底部下载。
效果如下图所示:
二、使用说明
1、CSS样式：
<link rel="stylesheet" type="text/css" href="css/date.css">
2、JS插件代码：
<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="js/date.js" ></script>
<script type="text/javascript" src="js/iscroll_date.js" ></script>
3、完整使用方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>
<title>移动端日期选择插件特效-幸凡学习网</title>
<link rel="stylesheet" type="text/css" href="css/date.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/date.js?2153"></script>
<script type="text/javascript" src="js/iscroll_date.js"></script>
</head>
<body>
<!-- 日期容器 -->
<div id="datePlugin"></div>
<input type="text" id="dateinput" style="width:90%;height:50px;line-height:50px;display:block;margin:10px auto;font-size:16px;text-align:center;" />
<script>
$(function(){
//初始化日期插件
$('#dateinput').date();
});
</script>
</body>
</html>
三、结语
DEMO地址：http://www.86y.org/DEMO/mobliedate/
下载地址：http://pan.baidu.com/s/1mioCxT2 访问密码 4nvq
做前端最大的收藏不是你做了多少网站，而是你从中学了多少。所以把自己所学的东西能与大家分享，让大家一起共同进步这才是目的。
大家如果发现有什么问题可以反馈给我。
(完)
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)