一：jquery、bootstrap实现日期下拉选择
点击文本框弹出窗口
弹窗显示日期时间选择下拉
年份取当前年份的前后各5年
天数随年份和月份的变化而变化
点击保存，文本框中显示选中的日期
代码部分的实现
引入bootstrap文件和外部js文件
<script src="../gongju/bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="../gongju/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script> <script src="riqi.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../gongju/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
文本框、引入bootstrap弹窗代码
<body> <input type="text" name="riqi" id="riqi" data-toggle="modal" data-target="#myModal"/> <!--给文本框定义id--> <!--弹窗部分--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">修改界面</h4> </div> <div class="modal-body"> <!--弹窗主题内容--> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="baocun">保存</button> </div> </div> </div> </div> </body>
外部js文件代码部分
$(document).ready(function(){ var str="<select id='nian'></select><select id='yue'></select><select id='ri'></select>"; $(".modal-body").html(str); fillnian(); fillyue(); fillri(); /*年份变化时,调用月份和日期的方法*/ $("#nian").change(function(){ fillyue(); fillri(); }) /*月份变化时,调用天数的方法*/ $("#yue").change(function(){ fillri(); }) $("#baocun").click(function(){ /*点击保存,取select的value值,并添加到文本框*/ var nn=$("#nian").val(); var mm=$("#yue").val(); var ri=$("#ri").val(); $("#riqi").val(nn+"-"+mm+"-"+ri); }) /*下面分别是填充年份/月份/日期的方法*/ function fillnian() { var n=new Date(); var nian=parseInt(n.getFullYear()); var str=""; for(var i=nian-5;i<nian+6;i++) { str+="<option value='"+i+"'>"+i+"</option>" } $("#nian").html(str); } function fillyue() { var str=""; for(var i=1;i<13;i++) { str+="<option value='"+i+"'>"+i+"</option>" } $("#yue").html(str); } function fillri() { var nn=$("#nian").val(); var mm=$("#yue").val(); var biao=31; if(mm==4 || mm==6 ||mm==9 ||mm==11) { biao=30; } if(mm==2) { if((nn%4==0 && nn%100 != 0) || nn%400==0) { biao=29; }else { biao=28; } } var str=""; for(var i=1;i<biao+1;i++) { str+="<option value='"+i+"'>"+i+"</option>"; } $("#ri").html(str); } })
二：bootstrap jquery UI自带动画的日期选择器
引入bootstrap jquery ui文件，直接引入下面几句话，不用改
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
代码实现部分
<body> <p>日期：<input type="text" id="datepicker"></p> </body> <script> $(function() { $( "#datepicker" ).datepicker(); }); </script>