在JavaScript文件中用jQuery方法实现日期时间选择功能

Posted 2020-09-04 周全

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);

}