基于JQuery的日期联动实现代码

所属分类: 网络编程 / JavaScript 阅读数: 1505
收藏 0 赞 0 分享

实现目标:

两个日期,有下拉框:

复制代码 代码如下:

<head>
//导入jquery地址
<script src="(Jquery地址)" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript">
//startYear发生变化
function changeYear(str,isstart)
{
var pre = "start";
if(isstart == false)
{
pre = "end";
}
var startMonth = $(pre + "Month").value;
if(startMonth == "")
{
var e = $(pre + "Month");
optionClear(e);
return;
}
var n = MonHead[startMonth - 1];
if(startMonth == 2 && IsPinYear($(pre + "Year").value))
{
n++;
}
writeDay(n,pre);
}
function changeMonth(str,isstart)
{
var pre = "start";
if(isstart == false)
{
pre = "end";
}
var year = $(pre + "Year").value;
if(year == "")
{
var e = $(pre + "Day");
optionClear(e);
return;
}
var n = MonHead[str - 1];
if(str == 2 && IsPinYear($(pre + "Year")))
{
n++;
}
writeDay(n,pre);
}
function dateStart()
{
var defaultStartY = "2011";
var defaultStartM = "1";
var defaultStartD = "14";
var defaultEndY = "2011";
var defaultEndM = "2";
var defaultEndD = "23";
MonHead = [31,28,31,30,31,30,31,31,30,31,30,31];
var prestr = new Array("start","end");
for(var j=0; j<2; j++)
{
var pre = prestr[j];
//start 年
var y = new Date().getFullYear();
if(pre == "start")
{
//start初始选中前第10天
var i_index = 0;
for(var i=(y-10); i<=y; i++)
{
$(pre+"Year").options.add(new Option(""+i+"",i));
if(i == defaultStartY)
{
$(pre+"Year").options[i_index].selected = true;
}
i_index++;
}
}
else
{
var i_index =0;
for(var i=(y-5); i<=y+5; i++)
{
$(pre+"Year").options.add(new Option(""+i+"",i));
if(i == defaultEndY)
{
$(pre+"Year").options[i_index].selected = true;
}
i_index++;
}
}
//start月
defaultM = (pre == "start" ? defaultStartM : defaultEndM)
for(var i = 1; i < 13; i++)
{
$(pre + "Month").options.add(new Option(""+i+"",i));
if(i == defaultM)
{
$(pre + "Month").options[i-1].selected = true;
}
}
//start日
var n = MonHead[$(pre + "Month").value];
if(new Date().getMonth == 1 && IsPinYear($(pre + "Year").value))
{
n++;
}
defaultD = (pre == "start" ? defaultStartD : defaultEndD)
writeDay(n,pre);
$(pre + "Day").options[defaultD-1].selected = true;
}
}
function writeDay(n,pre)
{
var e = $(pre + "Day");
optionClear(e);
for (var i=1; i<(n+1); i++)
{
e.options.add(new Option(""+i+"",i));
}
}
function IsPinYear(year)
{
return (0 == year%4 && (year%100 != 0 || year % 4 == 0));
}
function optionClear(e)
{
for(var i=e.options.length; i>=0; i--)
{
e.remove(i);
}
}
</script>
</head>
<body onload="dateStart()">
<p name="selectdate">

<select id="startYear" name="startYear" onchange="changeYear(this.value,true)">
</select>

<select id="startMonth" name="startMonth" onchange="changeMonth(this.value,true)">
</select>

<select id="startDay" name="startDay">
</select>


<select id="endYear" name="endYear" onchange="changeYear(this.value,false)">
</select>

<select id="endMonth" name="endMonth" onchange="changeMonth(this.value,false)">
</select>

<select id="endDay" name="endDay">
</select>

</p>
</body>

参考了一些代码,希望对需要的朋友有所帮助。

更多精彩内容其他人还在看

基于jquery封装的一个js分页

基于jquery封装的一个js分页代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

关于js datetime的那点事

关于js datetime的一些使用经验分享,想要了解datetime日期操作的朋友可以参考下。
收藏 0 赞 0 分享

js 关于=+与+=日期函数使用说明(赋值运算符)

js 关于=+与+=日期函数使用说明(赋值运算符),可以看下,就是一些运算符的使用,看哪个更适合你。
收藏 0 赞 0 分享

JS 操作符整理[推荐收藏]

JS 操作符主要包括算术运算符,赋值运算符,比较(关系)运算符,逻辑运算符,串符(连接作用),条件运算符等
收藏 0 赞 0 分享

让html的text输入框只能输入数字和1个小数点(0-59之间可改)

今天有同事需要这个功能,主要是限制用户输入不符合规范的数字与小数点导致不好计算价格问题,特整理了下面的代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

Jquery 获取checkbox的checked问题

这个郁闷了,今天写这个功能的时候发现了问题,上网找了好多资料对照,更加纠结
收藏 0 赞 0 分享

jQuery EasyUI API 中文文档 - DataGrid数据表格

jQuery EasyUI API 中文文档 - DataGrid数据表格使用说明,需要的朋友可以参考下。
收藏 0 赞 0 分享

jQuery EasyUI API 中文文档 - PropertyGrid属性表格

jQuery EasyUI API 中文文档 - PropertyGrid属性表格使用介绍,需要的朋友可以参考下。
收藏 0 赞 0 分享

20款效果非常棒的 jQuery 插件小结分享

这篇文章向大家推荐20款效果非常棒的 jQuery 插件。jQuery 是一个非常优秀的JavaScript库,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,同时也改变了很多人编写 JavaScript 代码的方式
收藏 0 赞 0 分享

基于Jquery插件开发之图片放大镜效果(仿淘宝)

公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大,使用jquery的朋友可以参考下。
收藏 0 赞 0 分享
查看更多