用Jquery做一个时间日期选择器
今天我们就用Jquery做一个时间日期选择器，当打开网页时，文本框里面显示的是当前的日期，点击文本框可以出现年、月、日的下拉菜单，并且可以选择，会根据年份的选择判断是否是闰年，从而改变二月的天数，闰年的2月是29天，不是闰年的2月是28天。并且4、6、9、11月份天数是30天，其他月份的天数是31天，这个一定要判断好。
首先我们看看主页面的代码是如何书写的：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <script src="dist/js/jquery-1.11.2.min.js" ></script> 7 <script src="dist/js/bootstrap.min.js" ></script> 8 <script src="riqi.js"></script> 9 <link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 10 </head> 11 <body> 12 <input type="text" id="riqi" style="margin-top: 20px; margin-left: 100px;" /> 13 14 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 15 <div class="modal-dialog"> 16 <div class="modal-content"> 17 <div class="modal-header"> 18 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 19 <h4 class="modal-title" id="myModalLabel">日期选择</h4> 20 </div> 21 <div class="modal-body"> 22 <!-- 23 作者：511108312@qq.com 24 时间：2017-01-09 25 描述：里面放内容，点击确定显示 26 --> 27 <select id="nian"><!--年--> 28 </select> 29 <select id="yue"><!--月--> 30 </select> 31 <select id="tian"><!--天--> 32 </select> 33 </div> 34 <div class="modal-footer"> 35 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 36 <button type="button" class="btn btn-primary" id="sure">确定</button><!--把我要选的内容扔到文本框里--> 37 </div> 38 </div><!-- /.modal-content --> 39 </div><!-- /.modal --> 40 </div> 41 </body> 42 <script type="text/javascript"> 43 //这是加载用的 44 $("#riqi").click(function(){ 45 $('#myModal').modal('show');/*当点击文本框的时候，要触发并显示模态框*/ 46 LoadNian();//调出的当前年份 47 LoadYue();//调出的当前月份 48 LoadTian();//调出的当前天 49 }) 50 //给年月加个事件。这是操作用的 51 $("#sure").click(function(){ 52 var nian = $("#nian").val();//取到后吧这三个值扔到文本框里面 53 var yue = $("#yue").val(); 54 var tian = $("#tian").val(); 55 56 var str = nian+"-"+yue+"-"+tian;//把年月日拼字符串 57 $("#riqi").val(str); 58 $('#myModal').modal('hide')//选完直接关闭模态框 59 }) 60 61 62 </script> 63 </html>
之后我们看看引用文件，即js文件的代码是如何写的：riqi.js:
1 // JavaScript Document 2 //给年月加个事件要放上面 3 $(document).ready(function(e) {//当年的选中项变的时候要从新选择下天数 4 $("#nian").change(function(){ 5 LoadTian(); 6 }) 7 $("#yue").change(function(){//当月份的下拉变化的时候也要从新加载下天数 8 LoadTian(); 9 }) 10 }); 11 12 //加载年份 13 function LoadNian() 14 { 15 var date=new Date; 16 var year=date.getFullYear(); //获取当前年份 17 18 var str = ""; 19 20 for(var i=year-5;i<year+6;i++)//从当前年份减5，当前年份加6、取前5年后5年//i就等于年份 21 { 22 if(i==year)//默认定位当前年份 23 { 24 str +="<option selected='selected' value='"+i+"'>"+i+"</option>";//默认定位当前年份 25 } 26 else 27 { 28 str +="<option value='"+i+"'>"+i+"</option>"; 29 } 30 } 31 32 $("#nian").html(str);//找到ID等于nian的下拉把option扔里面，option等于str 33 34 35 } 36 37 //加载月份 38 function LoadYue() 39 { 40 var date=new Date; 41 var yue=date.getMonth()+1; 42 43 var str = ""; 44 45 for(var i=1;i<13;i++) 46 { 47 if(i==yue)//当前月份 48 { 49 str +="<option selected='selected' value='"+i+"'>"+i+"</option>"; 50 } 51 else 52 { 53 str +="<option value='"+i+"'>"+i+"</option>"; 54 } 55 } 56 $("#yue").html(str); 57 } 58 59 //加载天 60 function LoadTian() 61 { 62 var date=new Date; 63 var tian = date.getDate();//获取当前天 64 65 var zs = 31; //总天数 66 var nian = $("#nian").val();//取当前选中的年份 67 var yue = $("#yue").val();//取当前选中的月份 68 if(yue == 4 || yue==6 || yue==9 || yue==11)//判断什么情况下不等于31，有2个条件一个是年一个是月||或者当月份等于4，6，9，11等于30天 69 { 70 zs = 30; 71 } 72 else if(yue==2)//如果是2月 73 { 74 if((nian%4==0 && nian%100 !=0) || nian%400==0)//普通年条件能被4整除并且不能被100整除。或者能被400整除就是润年 75 { 76 zs = 29; 77 } 78 else 79 { 80 zs = 28; 81 } 82 } 83 84 var str = ""; 85 86 for(var i=1;i<zs+1;i++) 87 { 88 if(i==tian) 89 { 90 str +="<option selected='selected' value='"+i+"'>"+i+"</option>"; 91 } 92 else 93 { 94 str +="<option value='"+i+"'>"+i+"</option>"; 95 } 96 } 97 98 $("#tian").html(str); 99 100 }
这就是我们要写的两个页面的代码了，不是特别复杂，有的人可能会说，如果我们要用的话直接从网上下载就好了，可是如果我们是要在手机客户端运用呢，那我们就要自己写了，这就是做这个的目的，下面我们看看效果：
让我们选择一个日期看看：
看看最终的显示结果是什么：
这就是我们要的效果，如果你还想继续改进可以把时间也加上，上面两个页面的代码都加了详细的注释，如果有什么问题可以在线交流，欢迎大家提出自己的意见和建议。谢谢大家的支持。怎么就是不能发到首页呢？
