利用Query+bootstrap和js两种方式实现日期选择器(2)

//加载年份 function LoadNian() { var date=new Date; //和js的方法一样取当前时间和年份 var year=date.getFullYear(); var str = ""; for(var i=year-5;i<year+6;i++) {<br>　　　　　　　　　//判断当前年是否选中 if(i==year) { 　　str +="<option selected='selected' value='"+i+"'>"+i+"</option>"; } else { 　　str +="<option value='"+i+"'>"+i+"</option>"; } } $("#nian").html(str); //也是将值写到年的下拉列表中 }

//加载月份 function LoadYue() {<br>　　　　　//和js中的月份的逻辑都是一样的 var date=new Date; var yue=date.getMonth()+1; //取到当前月份 var str = ""; for(var i=1;i<13;i++) {<br>　　　　　　　　　//判断月份是否选中 if(i==yue) { 　　str +="<option selected='selected' value='"+i+"'>"+i+"</option>"; } else { 　　str +="<option value='"+i+"'>"+i+"</option>"; } } $("#yue").html(str); }

//加载天 function LoadTian() {<br>　　　　　//和js中的逻辑是一样的 var date=new Date; var tian = date.getDate(); //取到天数 var zs = 31; //总天数 var nian = $("#nian").val(); //取到年的值 var yue = $("#yue").val(); //取到月的值<br><br>　　　　　//也是天数是30天的月份 if(yue == 4 || yue==6 || yue==9 || yue==11) { 　　zs = 30; } else if(yue==2) {<br>　　　　　　　　　//判断闰月的 if((nian%4==0 && nian%100 !=0) || nian%400==0) { 　　zs = 29; } else { 　　zs = 28; } } var str = ""; for(var i=1;i<zs+1;i++) {<br>　　　　　　　　　//判断天数是否选中 if(i==tian) { str +="<option selected='selected' value='"+i+"'>"+i+"</option>"; } else { str +="<option value='"+i+"'>"+i+"</option>"; } } $("#tian").html(str); }

最后就是要选择哪一年，后面的月和日都要变，那么就要在最开始写

$(document).ready(function(e) { $("#nian").change(function(){ //选年改变天 　　LoadTian(); }) $("#yue").change(function(){ //选月改变天 　　LoadTian(); }) });

（5）把选中的年月日的值传入文本框中

$("#sure").click(function(){ var nian = $("#nian").val(); //取到年的值 var yue = $("#yue").val(); //取到月份的值 var tian = $("#tian").val(); //取到天数的值 var str = nian+"-"+yue+"-"+tian; //拼接字符串显示年月日 $("#riqi").val(str); //将值放到riqi的文本框中 $('#myModal').modal('hide') //将弹窗关闭 })

这样选择器就结束了，看下整体效果：

单击文本框，弹出日期选择框

选择一个日期，单击确定按钮

另外：也可以除了日期，也可以加上默认时间

$("#sure").click(function(){ var nian = $("#nian").val(); //取到年的值 var yue = $("#yue").val(); //取到月份的值 var tian = $("#tian").val(); //取到天数的值 var d = new Date(); var str = nian+"-"+yue+"-"+tian+" "+d.getHours()+":"+d.getMinutes()+":"+d.getDate() ; //拼接字符串显示年月日，还有时间 $("#riqi").val(str); //将值放到riqi的文本框中 $('#myModal').modal('hide') //将弹窗关闭 })

选择效果，后面的时间是自动默认显示的：

日期选择器两种方法都可以使用。