利用Query+bootstrap和js兩種方式實現(xiàn)日期選擇器
更新時間：2017年01月10日 09:58:47 作者：悅～
日期選擇器在我們平時開發(fā)的時候經(jīng)常要用到，下面這篇文章主要給大家介紹了利用Query+bootstrap和js這兩種方式實現(xiàn)日期選擇器的方法,文中兩種方法都給出了詳細的示例代碼，有需要的朋友可以參考借鑒，下面來一起看看吧。
前言
所謂日期選擇是在下拉列表中選擇年、月、日，年顯示前后的五年，12個月，日就是有30、31、29、28天的區(qū)別，隨著月份的變而變，本文介紹了利用Query+bootstrap和js實現(xiàn)日期選擇器的兩種方法，下面來一起學習學習吧。
一、js方式的日期選擇
（1）首先就是三個下拉列表了，點擊年、月、日顯示列表中的內(nèi)容，這樣就是要給這三個列表加“點擊事件”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;
}
寫完了年方法，記得調(diào)用一下，查看效果如下：
（3）填充月的方法：這個和年的也是差不多，沒有什么大的變化
function FillYue()
{
var b = new Date(); //取當前時間
var yue = parseInt(b.getMonth()+1); //取當前月份
var str = "";
for(var i=1;i<13;i++) //循環(huán)；月份是從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的下拉列表中
}
寫完了月的方法，記得調(diào)用一下，查看效果如下：
（3）填充天的方法：和年和月的差不多，不一樣的就是月份不一樣，天數(shù)也是不一樣的
function FillTian()
{
var b = new Date();
var tian = parseInt(b.getDate()); //獲取當前天數(shù)
var yue = document.getElementById("yue").value; //找到月的值
var nian = document.getElementById("nian").value; //找到年的值
var ts = 31;
//30號的月數(shù)：月數(shù)是4、6、9、11時，天數(shù)是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> //判斷天數(shù)是否選中
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名是天的下拉列表
}
寫完了日的方法，記得調(diào)用一下，查看整體效果如下：
閏年如下：
二、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的模態(tài)框，直接引用就可以
<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">關(guān)閉</button>
<button type="button" class="btn btn-primary" id="sure">確定</button> //確定按鈕也要是加事件的，所以也要起個名字
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
（3）考慮下怎么顯示這個彈出框？
單擊顯示日期的文本框再彈出選擇框，那么就要對文本框設(shè)置事件
$("#riqi").click(function(){
$('#myModal').modal('show'); //bootstrap直接提示怎么顯示彈窗，直接拿過來用就可以
})
看下效果：
（4）寫jQuery頁面：年月日的方法其實和js的寫法差不多，就是樣式和取賦方式和js有點區(qū)別，其他的沒有什么可以注意的
當然，寫完了jQuery方法，記得用的時候調(diào)用一下
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(); //取到天數(shù)
var zs = 31; //總天數(shù)
var nian = $("#nian").val(); //取到年的值
var yue = $("#yue").val(); //取到月的值<br><br> //也是天數(shù)是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> //判斷天數(shù)是否選中
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(); //取到天數(shù)的值
var str = nian+"-"+yue+"-"+tian; //拼接字符串顯示年月日
$("#riqi").val(str); //將值放到riqi的文本框中
$('#myModal').modal('hide') //將彈窗關(guān)閉
})
這樣選擇器就結(jié)束了，看下整體效果：
單擊文本框，彈出日期選擇框
選擇一個日期，單擊確定按鈕
另外：也可以除了日期，也可以加上默認時間
$("#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() ; //拼接字符串顯示年月日，還有時間
$("#riqi").val(str); //將值放到riqi的文本框中
$('#myModal').modal('hide') //將彈窗關(guān)閉
})
選擇效果，后面的時間是自動默認顯示的：
日期選擇器兩種方法都可以使用。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
JS實現(xiàn)的表格操作類詳解(添加，刪除，排序，上移，下移)
這篇文章主要介紹了JS實現(xiàn)的表格操作類,可實現(xiàn)針對表格的添加,刪除,排序,上移,下移等操作,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
Microsoft Ajax Minifier 壓縮javascript的方法
使用Microsoft AJAX 庫 (第六個預覽版) 其中有一個 ajaxmin.exe 可以壓縮Js文件可以在dos 命令下 /? 查看其參數(shù)說明。2010-03-03
JavaScript字符串插入、刪除、替換函數(shù)使用示例
本文為大家介紹下JavaScript字符串的插入、刪除、替換函數(shù)的在實際中的應(yīng)用，想要學習的朋友可以參考下哈，希望對初學者有所幫助2013-07-07
這篇文章主要介紹了微信小程序中轉(zhuǎn)義字符的處理方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
在Firefox下js select標簽點擊無法彈出，在IE和CHROME下沒有此現(xiàn)象2014-03-03
JavaScript實現(xiàn)判斷時間間隔是否連續(xù)為一天
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)判斷時間間隔是否連續(xù)為一天,文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下2024-01-01
下面小編就為大家?guī)硪黄庋b獲取dom元素的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要為大家全面解析Bootstrap中tab（選項卡）的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了JS實現(xiàn)的雪花飄落特效,結(jié)合實例形式詳細分析了JavaScript結(jié)合時間函數(shù)動態(tài)操作頁面元素的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-12-12