jquery編寫(xiě)日期選擇器

2019-11-19 17:07:53

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

使用jquery做一個(gè)日期時(shí)間選擇器，最好使用bootstrap彈窗

實(shí)現(xiàn)：

（1）點(diǎn)擊文本框彈出窗口；

（2）彈窗里面顯示日期時(shí)間選擇下拉

（3）年份取當(dāng)前年份前后五年

（4）月份固定12個(gè)月

（5）天數(shù)根據(jù)年份與月份的變化而變化

（6）點(diǎn)擊確定，關(guān)閉彈窗，文本框里面的時(shí)間編程選中時(shí)間

1.若是jQuery跟bootstrap彈窗，必須引入文件包；

2.寫(xiě)一個(gè)文本框，給他id用來(lái)寫(xiě)事件；

3.去bootstrap里面找到模態(tài)框，復(fù)制，黏上就行了；

4.把模態(tài)框里沒(méi)用的東西去掉，并加上三個(gè)下拉框；

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無(wú)標(biāo)題文檔</title> <script src="dist/js/jquery-1.11.2.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> <link href="dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" /></head><body><!--文本框--><input type="text" id="rq"/><!--模態(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">   <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">    <!--    內(nèi)容-->    <!--    三個(gè)下拉框-->    <select id="nian"></select>年    <select id="yue"></select>月    <select id="ri"></select>日   </div>   <div class="modal-footer">    <!--確定按鈕加上事件，用來(lái)寫(xiě)點(diǎn)擊事件-->    <button type="button" class="btn btn-primary" id="queding">確定</button>   </div>  </div><!-- /.modal-content --> </div><!-- /.modal --></div></body></html>

主頁(yè)的東西都完事了，來(lái)寫(xiě)js代碼，js代碼可以在script標(biāo)簽里寫(xiě)，但是為了清晰，且用于日后方便實(shí)用，新建js文件：

5.先讓他的文本框里顯示一下當(dāng)前的時(shí)間吧：

來(lái)寫(xiě)：

//文本框內(nèi)顯示當(dāng)前時(shí)間：// 準(zhǔn)備好：$(document).ready(function(e){ // 來(lái)獲取時(shí)間： var date = new Date(); //獲取年 var nian = date.getFullYear(); //獲取月，記得加1 var yue = date.getMonth()+1; //獲取天： var tian = date.getDate(); //打印，拼接字符串 $("#rq").val(nian+"-"+yue+"-"+tian);});

記得在主頁(yè)面引用哦！看圖：

6.來(lái)寫(xiě)文本框的點(diǎn)擊事件吧，讓他點(diǎn)擊文本框的時(shí)候彈出模態(tài)框：

//文本框點(diǎn)擊事件： $("#rq").click(function(){  // 手動(dòng)打開(kāi)模態(tài)框的方法：找到模態(tài)框的id，根據(jù)Bookstrap里面的方法  $('#myModal').modal('show');  // 執(zhí)行三個(gè)方法  fnian();  fyue();  ftian(); })

這樣當(dāng)我點(diǎn)擊文本框：看圖：

7.點(diǎn)擊確定的事件先不要加，因?yàn)檫€要傳給他東西，先來(lái)寫(xiě)那三個(gè)方法吧：

// 寫(xiě)方法，//加載年份的方法function Fnian(){ //先來(lái)取當(dāng)前年份 var date = new Date(); var nian = date.getFullYear(); // 定義個(gè)變量來(lái)接收： var str = ""; //for循環(huán)走起： for(var i=nian-5;i<nian+6;i++) {  //判斷若是當(dāng)前年份，設(shè)為value  if(i==nian)  {   str = str + "<option selected='selected' value='" + i + "'>" + i + "</option>";  }  else  {   //若不是，正常顯示   str = str +"<option value='"+i+"'>"+i+"</option>";  } } $("#nian").html(str);}//加載月份的方法：function Fyue(){ var date = new Date(); //獲取月，記得加1 var yue = date.getMonth()+1; //先取當(dāng)前月份： var date = new Date(); var yue = data.getMonth()+1; // 定義個(gè)變量來(lái)接收： var str = ""; // for循環(huán)走 for(var i=1;i<13;i++) {  //判斷若是當(dāng)前月份，設(shè)為value  if(i==yue)  {   str = str+"<option selected='selected' value='"+i+"'>"+i+"</option>";  }  else  {   //若不是，正常顯示   str = str +"<option value='"+i+"'>"+i+"</option>";  } } $("#yue").html(str); // document.getElementById("yue").innerHTML=str;}//加載天的方法function Ftian(){ //獲取當(dāng)天； var date = new Date(); var tian = date.getDate(); //把月份與年份取過(guò)來(lái),用于判斷： var nian = $("#nian").val(); var yue = $("#yue").val(); //設(shè)一個(gè)總數(shù)，判斷完成后更改他就好 var zs = 31; //判斷來(lái)了！ if(yue==4||yue==6||yue==9||yue==11) {  //若是4.6.9.11月，每月三十天  zs = 30; } else if(yue==2) {  //若是2月，再判斷，是否為閏年  if((nian%4==0 && nian%100!=0) || nian%400==0 )  {   //若是閏年，2月29天   zs = 29;  }  else  {   //否則2月為28天   zs = 28;  } } // for循環(huán)搞起 // 定義個(gè)變量來(lái)接收： var str = ""; //for循環(huán)走起： for(i=1;i<zs+1;i++) {  //判斷若是當(dāng)天，設(shè)為value  if(i==tian)  {   str = str + "<option selected='selected' value='" + i + "'>" + i + "</option>";  }  else  {   //若不是，正常顯示   str = str +"<option value='"+i+"'>"+i+"</option>";  } } $("#tian").html(str);}

好。加載年份、月份、天的方法都寫(xiě)完了，上面已經(jīng)執(zhí)行了，

看下圖：

8.再來(lái)寫(xiě)確定按鈕的點(diǎn)擊事件：

先給模態(tài)框里面的確定按鈕添加上id吧

<button type="button" class="btn btn-primary" id="queding">確定</button>

設(shè)置好了id，去寫(xiě)事件：

//最后給確定按鈕加點(diǎn)擊事件 $("#queding").click(function(){  var nian = $("#nian").val();  var yue = $("#yue").val();  var tian = $("#tian").val();  $("#rq").val(nian+"-"+yue+"-"+tian);  $('#myModal').modal('hide'); })

點(diǎn)擊關(guān)閉模態(tài)框，并傳去數(shù)據(jù)；

完成圖：