JavaScript 日期选择功能二_

文章·资料	电脑软件	手机软件	网站源码
电脑·手机·网络学习话题娱乐故事文化·历史国学典籍法律法规	操作系统网络办公·文件音频视频图形图像硬件·驱动程序行业学习编程游戏	安卓苹果鸿蒙其他	ASP ASP.NET JSP PHP HTML·CSS·JavaScript

本站搜索

推荐文章 More...


	华硕易电脑(ASUS Eee PC 10.. 先来段开场白：为了外出携带方便，..

	Acronis True Image 使用.. 　　一款可以在Windows下使用全..

	Norton Ghost 使用详解一、分区备份　　使用Ghost进..

文章阅读排行


	Microsoft SQL Server 2000.. 　　对于第一次安装 Microsoft SQ..

	ASP：Dimac W3 JMail 发送.. 【发送邮件测试代码下载】压..

	ASP：Persits ASPMail 发送.. 【发送邮件测试代码下载】压..

	VMware Workstation：安装.. 编写这份虚拟机安装的图文教程，..

	华硕易电脑(ASUS Eee PC 10.. 先来段开场白：为了外出携带方便，..

	ASP：Microsoft CDO 发送邮.. 【发送邮件测试代码下载】压..

文章信息

JavaScript 日期选择功能二

〖评论()〗〖留言〗〖收藏〗

〖文章分类：电脑·手机·网络 / HTML·CSS·JavaScript〗〖阅读选项〗

<html>

<head>
<title>日期选择效果</title>
<script type="text/javascript">
function HS_DateAdd(interval,number,date){
number = parseInt(number);
if (typeof(date)=="string"){var date = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2])}
if (typeof(date)=="object"){var date = date}
switch(interval){
case "y":return new Date(date.getFullYear()+number,date.getMonth(),date.getDate()); break;
case "m":return new Date(date.getFullYear(),date.getMonth()+number,checkDate(date.getFullYear(),date.getMonth()+number,date.getDate())); break;
case "d":return new Date(date.getFullYear(),date.getMonth(),date.getDate()+number); break;
case "w":return new Date(date.getFullYear(),date.getMonth(),7*number+date.getDate()); break;
}
}
function checkDate(year,month,date){
var enddate = ["31","28","31","30","31","30","31","31","30","31","30","31"];
var returnDate = "";
if (year%4==0){enddate[1]="29"}
if (date>enddate[month]){returnDate = enddate[month]}else{returnDate = date}
return returnDate;
}

var now;
if (typeof(arguments[0])=="string"){
   selectDate = arguments[0].split("-");
   var year = selectDate[0];
   var month = parseInt(selectDate[1])-1+"";
   var date = selectDate[2];
   now = new Date(year,month,date);
}else if (typeof(arguments[0])=="object"){
   now = arguments[0];
}
var lastMonthEndDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+now.getMonth()+"-01").getDate();
var lastMonthDate = WeekDay(now.getFullYear()+"-"+now.getMonth()+"-01");
var thisMonthLastDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-01");
var thisMonthEndDate = thisMonthLastDate.getDate();
var thisMonthEndDay = thisMonthLastDate.getDay();
var todayObj = new Date();
today = todayObj.getFullYear()+"-"+todayObj.getMonth()+"-"+todayObj.getDate();

for (i=0; i<lastMonthDate; i++){ // Last Month's Date
lis = "<li class='lastMonthDate'>"+lastMonthEndDate+"</li>" + lis;
lastMonthEndDate--;
}
for (i=1; i<=thisMonthEndDate; i++){ // Current Month's Date

   if(today == now.getFullYear()+"-"+now.getMonth()+"-"+i){
    var todayString = now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-"+i;
    lis += "<li><a href=javascript:void(0) class='today' onclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";
   }else{
    lis += "<li><a href=javascript:void(0) onclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";
   }

}
var j=1;
for (i=thisMonthEndDay; i<6; i++){ // Next Month's Date
   lis += "<li class='nextMonthDate'>"+j+"</li>";
   j++;
}
lis += style;

var CalenderTitle = "<a href='javascript:void(0)' class='NextMonth' onclick=HS_calender(HS_DateAdd('m',1,'"+now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+"'),this) title='Next Month'>»</a>";
CalenderTitle += "<a href='javascript:void(0)' class='LastMonth' onclick=HS_calender(HS_DateAdd('m',-1,'"+now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+"'),this) title='Previous Month'>«</a>";
CalenderTitle += "<span class='selectThisYear'><a href='javascript:void(0)' onclick='CalenderselectYear(this)' title='Click here to select other year' >"+now.getFullYear()+"</a></span>年<span class='selectThisMonth'><a href='javascript:void(0)' onclick='CalenderselectMonth(this)' title='Click here to select other month'>"+(parseInt(now.getMonth())+1).toString()+"</a></span>月";

if (arguments.length>1){
arguments[1].parentNode.parentNode.getElementsByTagName("ul")[1].innerHTML = lis;
arguments[1].parentNode.innerHTML = CalenderTitle;

}else{
   var CalenderBox = style+"<div class='calender'><div class='calenderTitle'>"+CalenderTitle+"</div><div class='calenderBody'><ul class='day'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class='date' id='thisMonthDate'>"+lis+"</ul></div><div class='calenderBottom'><a href='javascript:void(0)' class='closeCalender' onclick='closeCalender(this)'>×</a><span><span><a href=javascript:void(0) onclick='_selectThisDay(this)' title='"+todayString+"'>Today</a></span></span></div></div>";
   return CalenderBox;
}
}
function _selectThisDay(d){
var boxObj = d.parentNode.parentNode.parentNode.parentNode.parentNode;
   boxObj.targetObj.value = d.title;
   boxObj.parentNode.removeChild(boxObj);
}
function closeCalender(d){
var boxObj = d.parentNode.parentNode.parentNode;
   boxObj.parentNode.removeChild(boxObj);
}

function selectThisYear(obj){
HS_calender(obj.value+"-"+obj.parentNode.parentNode.getElementsByTagName("span")[1].getElementsByTagName("a")[0].innerHTML+"-1",obj.parentNode);
}

<body>

<h1>Date Picker</h1>
<h4 style="border-bottom:1px solid #ccc">ver:1.0</h4>
<table border="1" width="400" height="150">
<tr>
   <td>文本文本文本</td>
   <td>点击输入框</td>
   <td>文本文本文本</td>
</tr>
<tr>
   <td>点击输入框</td>
   <td><input type="text" style="width:70px" onfocus="HS_setDate(this)">文本</td>
   <td>文本文本文本</td>
</tr>
<tr>
   <td>文本文本文本</td>
   <td>点击输入框</td>
   <td>文本<input type="text" style="width:70px" onfocus="HS_setDate(this)">文本</td>
</tr>
</table>
<ul>
<li>不需要其他框架类库</li>
<li>支持ie6、firefox、opera</li>
<li>点击年份与月份可以下拉选择</li>
</ul>

</body>

</html>

文章作者：未知更新日期：2008-03-23

〖文章浏览：〗〖打印文章〗〖发送文章〗

·JavaScript 脚本嵌套的两种方法 2009-08-23
·ASP用JavaScript脚本实现分页的办法 2008-03-07
·用 JavaScript 简单实现网页的中文简体繁体的转换 2005-07-26
·JavaScript 弹出窗口代码一 2005-10-09
·JavaScript表单验证 2005-12-15
·使用脚本(JavaScript)对下拉表单(Select)选择而改变表单文本框(Input)的字体.字号... 2009-07-14