日期選取器（Query+bootstrap和js兩種方式）

標籤：minutes   --   jquer   方法   body   下拉式功能表   content   html   oda   

日期選擇是在下拉式清單中選擇年、月、日，年顯示前後的五年，12個月，日就是有30、31、29、28天的區別，隨著月份的變而變

一、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年　　{
　　　　//判斷年的當前選中，選中當前的年份　　　　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{
　　　　　　　　　//判斷當前月份的選中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)    {
　　　　　//被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++)    {
　　　　　//判斷天數是否選中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">
　　　　　　　//標題部分            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                <h4 class="modal-title" id="myModalLabel">日期選擇</h4>   //顯示標題的地方            </div>
　　　　　　　//主體部分            <div class="modal-body">            <select id="nian">  //年的下拉式清單                </select>                <select id="yue">  //月的下拉式清單                </select>                <select id="tian">  //天的下拉式清單                </select>            </div>
　　　　　　　//最後部分            <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++){
　　　　　　　　　//判斷當前年是否選中if(i==year){　　str +="<option selected=‘selected‘ value=‘"+i+"‘>"+i+"</option>";}else{　　str +="<option value=‘"+i+"‘>"+i+"</option>";}}$("#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 +="<option selected=‘selected‘ value=‘"+i+"‘>"+i+"</option>";}else{　　str +="<option value=‘"+i+"‘>"+i+"</option>";}}$("#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<zs+1;i++){
　　　　　　　　　//判斷天數是否選中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‘)  //將彈窗關閉})

選擇效果，後面的時間是自動預設顯示的：

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

 

日期選取器（Query+bootstrap和js兩種方式）