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

年 月 日

　　var str = "";

　　for(var i=nian-5;i<nian+6;i++) //显示前后的5年
　　{
　　　　//判断年的当前选中，选中当前的年份
　　　　if( i==nian)
　　　　{
　　　　　　str = str+""+i+"";
　　　　}
　　　　else
　　　　{
　　　　　　str = str+""+i+"";
　　　　}
　　}
　　//给id名是nian的下拉菜单中加添加html，html就是上面写到的str
　　document.getElementById("nian").innerHTML = str;
}

var str = "";
for(var i=1;i<13;i++) //循环；月份是从1开始，一年12个月，小于13
{
　　　　　　　　　//判断当前月份的选中
if( i==yue)
{
　　str = str+""+i+"";
}
else
{
　　str = str+""+i+"";
}
}
document.getElementById("yue").innerHTML = str; //将str值写到id名是yue的下拉列表中
}

var yue = document.getElementById("yue").value; //找到月的值
var nian = document.getElementById("nian").value; //找到年的值
var ts = 31;

//30号的月数：月数是4、6、9、11时，天数是30天
if(yue==4 || yue==6 || yue==9 || yue==11)
{
ts=30;
}

//2月不同年的天
if(yue==2)
{
　　　　　//被4整除，同时不被100整除；或是被400整除的年
if((nian%4==0 && nian%100 != 0) || nian%400==0)
{
ts = 29; //闰年
}
else
{
ts = 28; //平年
}
}

var str = "";
for(var i=1;i<ts+1;i++)
{
　　　　　//判断天数是否选中
if( i==tian)
{
str = str+""+i+"";
}
else
{
str = str+""+i+"";
}
}
document.getElementById("tian").innerHTML = str; //将str的值给id名是天的下拉列表
}

//最终显示的日期时间的地方，文本框起个名字对其加事件

　　　　　　　//标题部分
　　　　　　　//主体部分
　　　　　　　//最后部分

var str = "";

for(var i=year-5;i<year+6;i++)
{
　　　　　　　　　//判断当前年是否选中
if(i==year)
{
　　str +=""+i+"";
}
else
{
　　str +=""+i+"";
}
}

$("#nian").html(str); //也是将值写到年的下拉列表中
}

　　　　　//和js中的月份的逻辑都是一样的 var date=new Date; var yue=date.getMonth()+1; //取到当前月份

var str = "";

for(var i=1;i<13;i++)
{
　　　　　　　　　//判断月份是否选中
if(i==yue)
{
　　str +=""+i+"";
}
else
{
　　str +=""+i+"";
}
}
$("#yue").html(str);
}

　　　　　//和js中的逻辑是一样的 var date=new Date; var tian = date.getDate(); //取到天数

var zs = 31; //总天数
var nian = $("#nian").val(); //取到年的值
var yue = $("#yue").val(); //取到月的值

　　　　　//也是天数是30天的月份
if(yue == 4 || yue==6 || yue==9 || yue==11)
{
　　zs = 30;
}
else if(yue==2)
{
　　　　　　　　　//判断闰月的
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++)
{
　　　　　　　　　//判断天数是否选中
if(i==tian)
{
str +=""+i+"";
}
else
{
str +=""+i+"";
}
}

$("#tian").html(str);

}

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

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