jquery編寫日期選擇器
編輯：JQuery入門技巧
使用jquery做一個日期時間選擇器，最好使用bootstrap彈窗
實現：
（1）點擊文本框彈出窗口；
（2）彈窗裡面顯示日期時間選擇下拉
（3）年份取當前年份前後五年
（4）月份固定12個月
（5）天數根據年份與月份的變化而變化
（6）點擊確定，關閉彈窗，文本框裡面的時間編程選中時間
1.若是jQuery跟bootstrap彈窗，必須引入文件包；
2.寫一個文本框，給他id用來寫事件；
3.去bootstrap裡面找到模態框，復制，黏上就行了；
4.把模態框裡沒用的東西去掉，並加上三個下拉框；
代碼：
<!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>無標題文檔</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"/>
<!--模態框-->
<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="ri"></select>日
</div>
<div class="modal-footer">
<!--確定按鈕加上事件，用來寫點擊事件-->
<button type="button" class="btn btn-primary" id="queding">確定</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>
主頁的東西都完事了，來寫js代碼，js代碼可以在script標簽裡寫，但是為了清晰，且用於日後方便實用，新建js文件：
5.先讓他的文本框裡顯示一下當前的時間吧：
來寫：
//文本框內顯示當前時間：
// 准備好：
$(document).ready(function(e){
// 來獲取時間：
var date = new Date();
//獲取年
var nian = date.getFullYear();
//獲取月，記得加1
var yue = date.getMonth()+1;
//獲取天：
var tian = date.getDate();
//打印，拼接字符串
$("#rq").val(nian+"-"+yue+"-"+tian);
});
記得在主頁面引用哦！看圖：
6.來寫文本框的點擊事件吧，讓他點擊文本框的時候彈出模態框：
//文本框點擊事件：
$("#rq").click(function(){
// 手動打開模態框的方法：找到模態框的id，根據Bookstrap裡面的方法
$('#myModal').modal('show');
// 執行三個方法
fnian();
fyue();
ftian();
})
這樣當我點擊文本框：看圖：
7.點擊確定的事件先不要加，因為還要傳給他東西，先來寫那三個方法吧：
// 寫方法，
//加載年份的方法
function Fnian()
{
//先來取當前年份
var date = new Date();
var nian = date.getFullYear();
// 定義個變量來接收：
var str = "";
//for循環走起：
for(var i=nian-5;i<nian+6;i++)
{
//判斷若是當前年份，設為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;
//先取當前月份：
var date = new Date();
var yue = data.getMonth()+1;
// 定義個變量來接收：
var str = "";
// for循環走
for(var i=1;i<13;i++)
{
//判斷若是當前月份，設為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()
{
//獲取當天；
var date = new Date();
var tian = date.getDate();
//把月份與年份取過來,用於判斷：
var nian = $("#nian").val();
var yue = $("#yue").val();
//設一個總數，判斷完成後更改他就好
var zs = 31;
//判斷來了！
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循環搞起
// 定義個變量來接收：
var str = "";
//for循環走起：
for(i=1;i<zs+1;i++)
{
//判斷若是當天，設為value
if(i==tian)
{
str = str + "<option selected='selected' value='" + i + "'>" + i + "</option>";
}
else
{
//若不是，正常顯示
str = str +"<option value='"+i+"'>"+i+"</option>";
}
}
$("#tian").html(str);
}
好。加載年份、月份、天的方法都寫完了，上面已經執行了，
看下圖：
8.再來寫確定按鈕的點擊事件：
先給模態框裡面的確定按鈕添加上id吧
<button type="button" class="btn btn-primary" id="queding">確定</button>
設置好了id，去寫事件：
//最後給確定按鈕加點擊事件
$("#queding").click(function(){
var nian = $("#nian").val();
var yue = $("#yue").val();
var tian = $("#tian").val();
$("#rq").val(nian+"-"+yue+"-"+tian);
$('#myModal').modal('hide');
})
點擊關閉模態框，並傳去數據；
完成圖：
點擊確定：
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！
小編推薦
熱門推薦