簡單的jQuery日期選擇

標籤：設定   使用   htm   點擊事件   select   引用   並且   doc   option   

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

點擊文字框彈出一個選擇框
引用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檔案

在文字框裡顯示選擇的年月日

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

簡單的jQuery日期選擇