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

点击文本框弹出窗口

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

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

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

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

 

代码部分的实现

引入bootstrap文件和外部js文件

文本框、引入bootstrap弹窗代码

       
                 
         
     
    
      
        
       
            
        
                
         ×                
         
修改界面
            
        
            
        
                
                                                     
        
            
        
                
         关闭                
         保存            
        
        
       
    
      
     

外部js文件代码部分

$(document).ready(function(){    var str="";    $(".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
     
      "+i+""        }        $("#nian").html(str);    }    function fillyue()    {                var str="";        for(var i=1;i<13;i++)        {            str+="
      "+i+""        }        $("#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
      
       "+i+"";        }        $("#ri").html(str);    }})
      
     

 

 

二：bootstrap jquery UI自带动画的日期选择器

 

 引入bootstrap jquery ui文件，直接引入下面几句话，不用改

代码实现部分

 
日期：