您的位置：首页 > Web前端 > BootStrap

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

2017-01-09 10:23 676 查看
一：jquery、bootstrap实现日期下拉选择

点击文本框弹出窗口

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

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

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

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





代码部分的实现

引入bootstrap文件和外部js文件

<scriptsrc="../gongju/bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js"type="text/javascript"></script>

<scriptsrc="../gongju/bootstrap-3.3.7-dist/js/bootstrap.min.js"type="text/javascript"></script>

<scriptsrc="riqi.js"type="text/javascript"></script>

<linkrel="stylesheet"type="text/css"href="../gongju/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>


文本框、引入bootstrap弹窗代码

<body>
<inputtype="text"name="riqi"id="riqi"data-toggle="modal"data-target="#myModal"/><!--给文本框定义id-->

<!--弹窗部分-->
<divclass="modalfade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button>
<h4class="modal-title"id="myModalLabel">修改界面</h4>
</div>
<divclass="modal-body">
<!--弹窗主题内容-->

</div>
<divclass="modal-footer">
<buttontype="button"class="btnbtn-default"data-dismiss="modal">关闭</button>
<buttontype="button"class="btnbtn-primary"id="baocun">保存</button>
</div>
</div>
</div>
</div>
</body>


外部js文件代码部分

$(document).ready(function(){
varstr="<selectid='nian'></select><selectid='yue'></select><selectid='ri'></select>";
$(".modal-body").html(str);
fillnian();
fillyue();
fillri();

/*年份变化时,调用月份和日期的方法*/
$("#nian").change(function(){
fillyue();
fillri();
})
/*月份变化时,调用天数的方法*/
$("#yue").change(function(){

fillri();
})

$("#baocun").click(function(){/*点击保存,取select的value值,并添加到文本框*/
varnn=$("#nian").val();
varmm=$("#yue").val();
varri=$("#ri").val();

$("#riqi").val(nn+"-"+mm+"-"+ri);

})

/*下面分别是填充年份/月份/日期的方法*/
functionfillnian()
{
varn=newDate();
varnian=parseInt(n.getFullYear());
varstr="";
for(vari=nian-5;i<nian+6;i++)
{
str+="<optionvalue='"+i+"'>"+i+"</option>"
}
$("#nian").html(str);
}
functionfillyue()
{

varstr="";
for(vari=1;i<13;i++)
{
str+="<optionvalue='"+i+"'>"+i+"</option>"
}
$("#yue").html(str);
}
functionfillri()
{
varnn=$("#nian").val();
varmm=$("#yue").val();
varbiao=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;
}
}
varstr="";
for(vari=1;i<biao+1;i++)
{
str+="<optionvalue='"+i+"'>"+i+"</option>";
}
$("#ri").html(str);
}
})


二：bootstrapjqueryUI自带动画的日期选择器



引入bootstrapjqueryui文件，直接引入下面几句话，不用改


<linkrel="stylesheet"href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<scriptsrc="//code.jquery.com/jquery-1.9.1.js"></script>
<scriptsrc="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<linkrel="stylesheet"href="http://jqueryui.com/resources/demos/style.css">



代码实现部分

<body>

<p>日期：<inputtype="text"id="datepicker"></p>

</body>

<script>
$(function(){
$("#datepicker").datepicker();
});
</script>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航