真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器

這篇文章主要介紹如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比雙湖網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式雙湖網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋雙湖地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

一、js方式的日期選擇

（1）首先就是三個(gè)下拉列表了，點(diǎn)擊年、月、日顯示列表中的內(nèi)容，這樣就是要給這三個(gè)列表加“點(diǎn)擊事件”onclick

年
月
日

也就是這樣的效果：

如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器

（2）寫js方法

注意：年月日三個(gè)選擇框，那么就是要寫三個(gè)方法

填充年的方法

function FillNian()
{
　　var b = new Date(); //取當(dāng)前時(shí)間
　　var nian = parseInt(b.getFullYear()); //取當(dāng)前年份
 
　　var str = "";
 
　　for(var i=nian-5;i　　　　//判斷年的當(dāng)前選中，選中當(dāng)前的年份
　　　　if( i==nian)
　　　　{
　　　　　　str = str+""+i+"";
　　　　}
　　　　else
　　　　{
　　　　　　str = str+""+i+"";
　　　　}
　　}
　　//給id名是nian的下拉菜單中加添加html，html就是上面寫到的str
　　document.getElementById("nian").innerHTML = str;
}

寫完了年方法，記得調(diào)用一下，查看效果如下：

如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器

（3）填充月的方法：這個(gè)和年的也是差不多，沒有什么大的變化

function FillYue()
{
　　var b = new Date(); //取當(dāng)前時(shí)間
 var yue = parseInt(b.getMonth()+1); //取當(dāng)前月份
 
 var str = "";
 for(var i=1;i<13;i++) //循環(huán)；月份是從1開始，一年12個(gè)月，小于13
 {
　　　　　　　　　//判斷當(dāng)前月份的選中
 if( i==yue)
 {
 　　str = str+""+i+"";
 }
 else
 {
 　　str = str+""+i+"";
 }
 }
 document.getElementById("yue").innerHTML = str; //將str值寫到id名是yue的下拉列表中
}

寫完了月的方法，記得調(diào)用一下，查看效果如下：　

如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器

（3）填充天的方法：和年和月的差不多，不一樣的就是月份不一樣，天數(shù)也是不一樣的

function FillTian()
{
 var b = new Date();
 var tian = parseInt(b.getDate()); //獲取當(dāng)前天數(shù)
 
 var yue = document.getElementById("yue").value; //找到月的值
 var nian = document.getElementById("nian").value; //找到年的值
 var ts = 31;
 
 //30號(hào)的月數(shù)：月數(shù)是4、6、9、11時(shí)，天數(shù)是30天
 if(yue==4 || yue==6 || yue==9 || yue==11)
 {
 ts=30;
 }
 
 //2月不同年的天
 if(yue==2)
 {
　　　　　//被4整除，同時(shí)不被100整除；或是被400整除的年
 if((nian%4==0 && nian%100 != 0) || nian%400==0)
 {
 ts = 29; //閏年
 }
 else
 {
 ts = 28; //平年
 }
 }
 
 var str = "";
 for(var i=1;i　　　　　//判斷天數(shù)是否選中
 if( i==tian)
 {
 str = str+""+i+"";
 }
 else
 {
 str = str+""+i+"";
 }
 }
 document.getElementById("tian").innerHTML = str; //將str的值給id名是天的下拉列表
}

寫完了日的方法，記得調(diào)用一下，查看整體效果如下：　

如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器　

閏年如下：

如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器

二、Query+bootstrap的日期選擇器

想用jQuery和bootstrap，必須引入這兩個(gè)的包

進(jìn)入正題：點(diǎn)擊文本框會(huì)彈出個(gè)日期選擇的窗口，所以

（1）寫個(gè)提示字，并且寫個(gè)文本框

 //最終顯示的日期時(shí)間的地方，文本框起個(gè)名字對(duì)其加事件

（2）寫bootstrap的模態(tài)框，直接引用就可以


 
  
　　　　　　　//標(biāo)題部分
   
    ×
    日期選擇 //顯示標(biāo)題的地方
   

　　　　　　　//主體部分          //年的下拉列表           //月的下拉列表           //天的下拉列表         

　　　　　　　//最后部分         關(guān)閉     確定 //確定按鈕也要是加事件的，所以也要起個(gè)名字    
    

（3）考慮下怎么顯示這個(gè)彈出框？

單擊顯示日期的文本框再彈出選擇框，那么就要對(duì)文本框設(shè)置事件

$("#riqi").click(function(){
 $('#myModal').modal('show'); //bootstrap直接提示怎么顯示彈窗，直接拿過來用就可以 
})

看下效果：

如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器

（4）寫jQuery頁面：年月日的方法其實(shí)和js的寫法差不多，就是樣式和取賦方式和js有點(diǎn)區(qū)別，其他的沒有什么可以注意的

當(dāng)然，寫完了jQuery方法，記得用的時(shí)候調(diào)用一下

jQuery頁面中的年、月、日的方法：和js中的邏輯都是一樣的（不多說）

//加載年份
function LoadNian()
{
 var date=new Date; //和js的方法一樣取當(dāng)前時(shí)間和年份
 var year=date.getFullYear();
  
 var str = "";
  
 for(var i=year-5;i　　　　　　　　　//判斷當(dāng)前年是否選中
  if(i==year)
  {
  　　str +=""+i+"";
  }
  else
  {
  　　str +=""+i+"";
  }
 }
  
 $("#nian").html(str); //也是將值寫到年的下拉列表中
}
//加載月份
function LoadYue()
{
　　　　　//和js中的月份的邏輯都是一樣的
 var date=new Date;
 var yue=date.getMonth()+1; //取到當(dāng)前月份
  
 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(); //取到天數(shù)
  
 var zs = 31; //總天數(shù)
 var nian = $("#nian").val(); //取到年的值
 var yue = $("#yue").val(); //取到月的值

　　　　　//也是天數(shù)是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　　　　　　　　　//判斷天數(shù)是否選中
  if(i==tian)
  {
   str +=""+i+"";
  }
  else
  {
   str +=""+i+"";
  }
 }
  
 $("#tian").html(str);
  
}

最后就是要選擇哪一年，后面的月和日都要變，那么就要在最開始寫

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

（5）把選中的年月日的值傳入文本框中

$("#sure").click(function(){
 var nian = $("#nian").val(); //取到年的值
 var yue = $("#yue").val(); //取到月份的值
 var tian = $("#tian").val(); //取到天數(shù)的值
   
 var str = nian+"-"+yue+"-"+tian; //拼接字符串顯示年月日
 $("#riqi").val(str); //將值放到riqi的文本框中
 $('#myModal').modal('hide') //將彈窗關(guān)閉
})

這樣選擇器就結(jié)束了，看下整體效果：

單擊文本框，彈出日期選擇框

如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器

選擇一個(gè)日期，單擊確定按鈕

如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器

另外：也可以除了日期，也可以加上默認(rèn)時(shí)間

$("#sure").click(function(){
 var nian = $("#nian").val(); //取到年的值
 var yue = $("#yue").val(); //取到月份的值
 var tian = $("#tian").val(); //取到天數(shù)的值
 
 var d = new Date();
 var str = nian+"-"+yue+"-"+tian+" "+d.getHours()+":"+d.getMinutes()+":"+d.getDate() ; //拼接字符串顯示年月日，還有時(shí)間
 $("#riqi").val(str); //將值放到riqi的文本框中
 $('#myModal').modal('hide') //將彈窗關(guān)閉
})

選擇效果，后面的時(shí)間是自動(dòng)默認(rèn)顯示的：

如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器

日期選擇器兩種方法都可以使用。

以上是“如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！


本文標(biāo)題：如何使用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器
轉(zhuǎn)載注明：http://weahome.cn/article/ihchpc.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部