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

年
月
日

function FillNian()
{
　　var b = new Date(); //取当前时间
　　var nian = parseInt(b.getFullYear()); //取当前年份
 
　　var str = "";
 
　　for(var i=nian-5;i　　　　//判断年的当前选中，选中当前的年份
　　　　if( i==nian)
　　　　{
　　　　　　str = str+""+i+"";
　　　　}
　　　　else
　　　　{
　　　　　　str = str+""+i+"";
　　　　}
　　}
　　//给id名是nian的下拉菜单中加添加html，html就是上面写到的str
　　document.getElementById("nian").innerHTML = str;
}

function FillYue()
{
　　var b = new Date(); //取当前时间
 var yue = parseInt(b.getMonth()+1); //取当前月份
 
 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的下拉列表中
}

function FillTian()
{
 var b = new Date();
 var tian = parseInt(b.getDate()); //获取当前天数
 
 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　　　　　//判断天数是否选中
 if( i==tian)
 {
 str = str+""+i+"";
 }
 else
 {
 str = str+""+i+"";
 }
 }
 document.getElementById("tian").innerHTML = str; //将str的值给id名是天的下拉列表
}

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

 

  

　　　　　　　//标题部分
   

    ×
    
日期选择
 //显示标题的地方
   

　　　　　　　//主体部分
   

     //年的下拉列表
    
     //月的下拉列表
    
     //天的下拉列表
    
   

　　　　　　　//最后部分
   

    关闭
    确定 //确定按钮也要是加事件的，所以也要起个名字
   
  
 

$("#riqi").click(function(){
 $('#myModal').modal('show'); //bootstrap直接提示怎么显示弹窗，直接拿过来用就可以 
})

//加载年份
function LoadNian()
{
 var date=new Date; //和js的方法一样取当前时间和年份
 var year=date.getFullYear();
  
 var str = "";
  
 for(var i=year-5;i　　　　　　　　　//判断当前年是否选中
  if(i==year)
  {
  　　str +=""+i+"";
  }
  else
  {
  　　str +=""+i+"";
  }
 }
  
 $("#nian").html(str); //也是将值写到年的下拉列表中
}

//加载月份
function LoadYue()
{
　　　　　//和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);
}

//加载天
function LoadTian()
{
　　　　　//和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　　　　　　　　　//判断天数是否选中
  if(i==tian)
  {
   str +=""+i+"";
  }
  else
  {
   str +=""+i+"";
  }
 }
  
 $("#tian").html(str);
  
}

$(document).ready(function(e) {
 $("#nian").change(function(){ //选年改变天
  　　LoadTian();
  })
 $("#yue").change(function(){ //选月改变天
  　　LoadTian();
  })
});

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

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