利用Query+bootstrap和js兩種方式實現日期選擇器

2019-11-19 18:02:44

字體：大中小

來源：轉載

供稿：網友

前言

所謂日期選擇是在下拉列表中選擇年、月、日，年顯示前后的五年，12個月，日就是有30、31、29、28天的區別，隨著月份的變而變，本文介紹了利用Query+bootstrap和js實現日期選擇器的兩種方法，下面來一起學習學習吧。

一、js方式的日期選擇

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

<select id="nian" onclick="biantian()"></select>年<select id="yue" onclick="biantian()"></select>月<select id="tian"></select>日

也就是這樣的效果：

（2）寫js方法

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

填充年的方法

function FillNian(){　　var b = new Date(); //取當前時間　　var nian = parseInt(b.getFullYear()); //取當前年份 　　var str = ""; 　　for(var i=nian-5;i<nian+6;i++) //顯示前后的5年　　{<br>　　　　//判斷年的當前選中，選中當前的年份　　　　if( i==nian)　　　　{　　　　　　str = str+"<option selected='selected' value='"+i+"' >"+i+"</option>";　　　　}　　　　else　　　　{　　　　　　str = str+"<option value='"+i+"'>"+i+"</option>";　　　　}　　}　　//給id名是nian的下拉菜單中加添加html，html就是上面寫到的str　　document.getElementById("nian").innerHTML = str;}

寫完了年方法，記得調用一下，查看效果如下：　　

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

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

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

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

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) {<br>　　　　　//被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<ts+1;i++) {<br>　　　　　//判斷天數是否選中 if( i==tian) { str = str+"<option selected='selected' value='"+i+"' >"+i+"</option>"; } else { str = str+"<option value='"+i+"'>"+i+"</option>"; } } document.getElementById("tian").innerHTML = str; //將str的值給id名是天的下拉列表}

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

閏年如下：

二、Query+bootstrap的日期選擇器

想用jQuery和bootstrap，必須引入這兩個的包

<script src="../jquery-1.11.2.min.js"></script><script src="../dist/js/bootstrap.min.js"></script><script src="riqishijian.js"></script><link href="../dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

進入正題：點擊文本框會彈出個日期選擇的窗口，所以

（1）寫個提示字，并且寫個文本框

<input type="text" id="riqi" /> //最終顯示的日期時間的地方，文本框起個名字對其加事件

（2）寫bootstrap的模態框，直接引用就可以

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog">  <div class="modal-content"><br>　　　　　　　//標題部分   <div class="modal-header">    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>    <h4 class="modal-title" id="myModalLabel">日期選擇</h4> //顯示標題的地方   </div><br>　　　　　　　//主體部分   <div class="modal-body">    <select id="nian"> //年的下拉列表    </select>    <select id="yue"> //月的下拉列表    </select>    <select id="tian"> //天的下拉列表    </select>   </div><br>　　　　　　　//最后部分   <div class="modal-footer">    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>    <button type="button" class="btn btn-primary" id="sure">確定</button> //確定按鈕也要是加事件的，所以也要起個名字   </div>  </div><!-- /.modal-content --> </div><!-- /.modal --></div>

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

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

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

看下效果：

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

當然，寫完了jQuery方法，記得用的時候調用一下

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

//加載年份function LoadNian(){ var date=new Date; //和js的方法一樣取當前時間和年份 var year=date.getFullYear();   var str = "";   for(var i=year-5;i<year+6;i++) {<br>　　　　　　　　　//判斷當前年是否選中  if(i==year)  {  　　str +="<option selected='selected' value='"+i+"'>"+i+"</option>";  }  else  {  　　str +="<option value='"+i+"'>"+i+"</option>";  } }   $("#nian").html(str); //也是將值寫到年的下拉列表中}

//加載月份function LoadYue(){<br>　　　　　//和js中的月份的邏輯都是一樣的 var date=new Date; var yue=date.getMonth()+1; //取到當前月份   var str = "";   for(var i=1;i<13;i++) {<br>　　　　　　　　　//判斷月份是否選中  if(i==yue)  {  　　str +="<option selected='selected' value='"+i+"'>"+i+"</option>";  }  else  {  　　str +="<option value='"+i+"'>"+i+"</option>";  } } $("#yue").html(str);}

//加載天function LoadTian(){<br>　　　　　//和js中的邏輯是一樣的 var date=new Date; var tian = date.getDate(); //取到天數   var zs = 31; //總天數 var nian = $("#nian").val(); //取到年的值 var yue = $("#yue").val(); //取到月的值<br><br>　　　　　//也是天數是30天的月份 if(yue == 4 || yue==6 || yue==9 || yue==11) { 　　zs = 30; } else if(yue==2) {<br>　　　　　　　　　//判斷閏月的  if((nian%4==0 && nian%100 !=0) || nian%400==0)  {  　　zs = 29;  }  else  {  　　zs = 28;  } }   var str = "";   for(var i=1;i<zs+1;i++) {<br>　　　　　　　　　//判斷天數是否選中  if(i==tian)  {   str +="<option selected='selected' value='"+i+"'>"+i+"</option>";  }  else  {   str +="<option value='"+i+"'>"+i+"</option>";  } }   $("#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(); //取到天數的值    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') //將彈窗關閉})

選擇效果，后面的時間是自動默認顯示的：