模块：（日期选择）jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一：jquery、bootstrap实现日期下拉选择

点击文本框弹出窗口

弹窗显示日期时间选择下拉

年份取当前年份的前后各5年

天数随年份和月份的变化而变化

点击保存，文本框中显示选中的日期

代码部分的实现

引入bootstrap文件和外部js文件

文本框、引入bootstrap弹窗代码

外部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<;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);
}
})