在JavaScript檔案中用jQuery方法實現日期時間選擇功能

標籤：style   else   val   功能   load   ide   oda   變化   click   

JavaScript Document

$(document).ready(function(e) {

在文字框裡面顯示當前日期
var date = new Date();
var nian = date.getFullYear();
var yue = date.getMonth()+1;
var tian = date.getDate();

$("#rq").val(nian+"-"+yue+"-"+tian);

給文字框加點擊事件
$("#rq").click(function(){
$(‘#myModal‘).modal(‘show‘);
載入年
LoadNian();
載入月
LoadYue();
載入天
LoadTian();
})

當年份選中變化的時候，重新載入天
$("#nian").change(function(){
LoadTian();
})
當月份選中變化的時候，重新載入天
$("#yue").change(function(){
LoadTian();
})
給確定按鈕加點擊事件
$("#qd").click(function(){
var nian = $("#nian").val();
var yue = $("#yue").val();
var tian = $("#tian").val();

$("#rq").val(nian+"-"+yue+"-"+tian);
$(‘#myModal‘).modal(‘hide‘);
})

});

載入年的方法
function LoadNian()
{
var date = new Date();
var nian = date.getFullYear();

var str = "";
for(var i=nian-5;i<nian+6;i++)
{
if(i==nian)
{
str = str +"<option selected=‘selected‘ value=‘"+i+"‘>"+i+"</option>";
}
else
{
str = 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 = str+"<option selected=‘selected‘ value=‘"+i+"‘>"+i+"</option>";
}
else
{
str = str+"<option value=‘"+i+"‘>"+i+"</option>";
}
}
$("#yue").html(str);
}

載入天
function LoadTian()
{
var date = new Date();
var tian = date.getDate();
var yue = $("#yue").val();
var nian = $("#nian").val();

var zs = 31;
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 = str +"<option selected=‘selected‘ value=‘"+i+"‘>"+i+"</option>";
}
else
{
str = str +"<option value=‘"+i+"‘>"+i+"</option>";
}
}

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

}

 

 

 

在JavaScript檔案中用jQuery方法實現日期時間選擇功能