簡單的jQuery日期選擇


建立一個存放日期的文本框

點擊文本框彈出一個選擇框
引用jQuery文件
引用bootstrap文件

使用模態框

使用模態框的方法設置點擊文本框顯示模態框
手動打開模態框的方法:
$('id').modal('show');
關閉:(點擊確定后會自動關閉)
$('id').modal('hide')
填充數據,建立一個外部js文件

js方法:

加載年份
function LoadNian()
{
var date=new Date;
var year=date.getFullYear();

var str = "";

for(var i=year-5;i<year+6;i++) for循環設置當前年份的前五年到后五年
{
if(i==year) 定位當前年份
{
str +="<option selected='selected' value='"+i+"'>"+i+"</option>";
}
else
{
str +="<option value='"+i+"'>"+i+"</option>";
}
}

$("#nian").html(str);


}

加載月份
function LoadYue()
{
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()
{
var date=new Date;
var tian = date.getDate();

var zs = 31; 總天數
var nian = $("#nian").val(); 取當前選中的年份與月份
var yue = $("#yue").val();
if(yue == 4 || yue==6 || yue==9 || yue==11) 判斷如果是4、6、9、11月那就是30天
{
zs = 30;
}
else if(yue==2) 判斷如果是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(){ change事件當年發生變化重新加載天數
LoadTian();
})
$("#yue").change(function(){ 當月發生變化重新加載天數
LoadTian();
})
});

引入外部js文件

在文本框里顯示選擇的年月日

給模態框里的確認按鈕加點擊事件
取年月日的值拼成字符串找到文本框把取好的值文本框內


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM