一：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>