前言
所谓日期选择是在下拉列表中选择年、月、日,年显示前后的五年,12个月,日就是有30、31、29、28天的区别,随着月份的变而变,本文介绍了利用Query+bootstrap和js实现日期选择器的两种方法,下面来一起学习学习吧。
一、js方式的日期选择
(1)首先就是三个下拉列表了,点击年、月、日显示列表中的内容,这样就是要给这三个列表加“点击事件”onclick
也就是这样的效果:
(2)写js方法
注意:年月日三个选择框,那么就是要写三个方法
填充年的方法
for(var i=nian-5;i<nian+6;i++) //显示前后的5年
{
//判断年的当前选中,选中当前的年份
if( i==nian)
{
str = str+"";
}
else
{
str = str+"";
}
}
//给id名是nian的下拉菜单中加添加html,html就是上面写到的str
document.getElementById("nian").innerHTML = str;
}
(3)填充月的方法:这个和年的也是差不多,没有什么大的变化
for(var i=1;i<13;i++) //循环;月份是从1开始,一年12个月,小于13
{
//判断当前月份的选中
if( i==yue)
{
str = str+"";
}
else
{
str = str+"";
}
}
document.getElementById("yue").innerHTML = str; //将str值写到id名是yue的下拉列表中
}
(3)填充天的方法:和年和月的差不多,不一样的就是月份不一样,天数也是不一样的
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+"";
}
else
{
str = str+"";
}
}
document.getElementById("tian").innerHTML = str; //将str的值给id名是天的下拉列表
}
闰年如下:
二、Query+bootstrap的日期选择器
想用jQuery和bootstrap,必须引入这两个的包
进入正题:点击文本框会弹出个日期选择的窗口,所以
(1)写个提示字,并且写个文本框
//最终显示的日期时间的地方,文本框起个名字对其加事件