<!DOCTYPE html PUBLIC "34;-//W3C//DTD XHTML 1.0 Transitional//EN"34; "34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"34;>
<html xmlns="34;http://www.w3.org/1999/xhtml"34;>
<head>
<title>日期选择效果</title>
<script type="34;text/javascript"34;>
function HS_DateAdd(interval,number,date){
number = parseInt(number);
if (typeof(date)=="34;string"34;){var date = new Date(date.split("34;-"34;)[0],date.split("34;-"34;)[1],date.split("34;-"34;)[2])}
if (typeof(date)=="34;object"34;){var date = date}
switch(interval){
case "34;y"34;:return new Date(date.getFullYear()+number,date.getMonth(),date.getDate()); break;
case "34;m"34;:return new Date(date.getFullYear(),date.getMonth()+number,checkDate(date.getFullYear(),date.getMonth()+number,date.getDate())); break;
case "34;d"34;:return new Date(date.getFullYear(),date.getMonth(),date.getDate()+number); break;
case "34;w"34;:return new Date(date.getFullYear(),date.getMonth(),7*number+date.getDate()); break;
}
}
function checkDate(year,month,date){
var enddate = ["34;31"34;,"34;28"34;,"34;31"34;,"34;30"34;,"34;31"34;,"34;30"34;
,"34;31"34;,"34;31"34;,"34;30"34;,"34;31"34;,"34;30"34;,"34;31"34;];
var returnDate = "34;"34;;
if (year%4==0){enddate[1]="34;29"34;}
if (date>enddate[month]){returnDate = enddate[month]}else{returnDate = date}
return returnDate;
}
function WeekDay(date){
var theDate;
if (typeof(date)=="34;string"34;){theDate = new Date(date.split("34;-"34;)[0],date.split("34;-"34;)[1],date.split("34;-"34;)[2]);}
if (typeof(date)=="34;object"34;){theDate = date}
return theDate.getDay();
}
function HS_calender(){
var lis = "34;"34;;
var style = "34;"34;;
/*可以把下面的css剪切出去独立一个css文件webjx.com*/
style +="34;<style type="39;text/css"39;>"34;;
style +="34;.calender { width:170px; height:auto; font-size:12px; margin-right:14px; background:url(calenderbg.gif) no-repeat right center #fff; border:1px solid #397EAE; padding:1px}"34;;
style +="34;.calender ul {list-style-type:none; margin:0; padding:0;}"34;;
style +="34;.calender .day { background-color:#EDF5FF; height:20px;}"34;;
style +="34;.calender .day li,.calender .date li{ float:left; width:14%; height:20px; line-height:20px; text-align:center}"34;;
style +="34;.calender li a { text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}"34;;
style +="34;.calender li a:hover { color:#f30; text-decoration:underline}"34;;
style +="34;.calender li a.hasArticle {font-weight:bold; color:#f60 !important}"34;;
style +="34;.lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}"34;;
style +="34;.sel"101;ctThisYear a, .sel"101;ctThisMonth a{text-decoration:none; margin:0 2px; color:#000; font-weight:bold}"34;;
style +="34;.calender .LastMonth, .calender .NextMonth{ text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}"34;;
style +="34;.calender .LastMonth { float:left;}"34;;
style +="34;.calender .NextMonth { float:right;}"34;;
style +="34;.calenderBody {clear:both}"34;;
style +="34;.calenderTitle {text-align:center;height:20px; line-height:20px; clear:both}"34;;
style +="34;.today { background-color:#ffffaa;border:1px solid #f60; padding:2px}"34;;
style +="34;.today a { color:#f30; }"34;;
style +="34;.calenderBottom {clear:both; border-top:1px solid #ddd; padding: 3px 0; text-align:left}"34;;
style +="34;.calenderBottom a {text-decoration:none; margin:2px !important; font-weight:bold; color:#000}"34;;
style +="34;.calenderBottom a.closeCalender{float:right}"34;;
style +="34;.closeCalenderBox {float:right; border:1px solid #000; background:#fff; font-size:9px; width:11px; height:11px; line-height:11px; text-align:center;overflow:hidden; font-weight:normal !important}"34;;
style +="34;</style>"34;;
var now;
if (typeof(arguments[0])=="34;string"34;){
sel"101;ctDate = arguments[0].split("34;-"34;);
var year = sel"101;ctDate[0];
var month = parseInt(sel"101;ctDate[1])-1+"34;"34;;
var date = sel"101;ctDate[2];
now = new Date(year,month,date);
}else if (typeof(arguments[0])=="34;object"34;){
now = arguments[0];
}
var lastMonthEndDate = HS_DateAdd("34;d"34;,"34;-1"34;,now.getFullYear()+"34;-"34;+now.getMonth()+"34;-01"34;).getDate();
var lastMonthDate = WeekDay(now.getFullYear()+"34;-"34;+now.getMonth()+"34;-01"34;);
var thisMonthLastDate = HS_DateAdd("34;d"34;,"34;-1"34;,now.getFullYear()+"34;-"34;+(parseInt(now.getMonth())+1).toString()+"34;-01"34;);
var thisMonthEndDate = thisMonthLastDate.getDate();
var thisMonthEndDay = thisMonthLastDate.getDay();
var todayObj = new Date();
today = todayObj.getFullYear()+"34;-"34;+todayObj.getMonth()+"34;-"34;+todayObj.getDate();
for (i=0; i<lastMonthDate; i++){ // Last Month"39;s Date
lis = "34;<li class="39;lastMonthDate"39;>"34;+lastMonthEndDate+"34;</li>"34; + lis;
lastMonthEndDate--;
}
for (i=1; i<=thisMonthEndDate; i++){ // Current Month"39;s Date
if(today == now.getFullYear()+"34;-"34;+now.getMonth()+"34;-"34;+i){
var todayString = now.getFullYear()+"34;-"34;+(parseInt(now.getMonth())+1).toString()+"34;-"34;+i;
lis += "34;<li><a href=javascript:void(0) class="39;today"39; onclick="39;_sel"101;ctThisDay(this)"39; title="39;"34;+now.getFullYear()+"34;-"34;+(parseInt(now.getMonth())+1)+"34;-"34;+i+"34;"39;>"34;+i+"34;</a></li>"34;;
}else{
lis += "34;<li><a href=javascript:void(0) onclick="39;_sel"101;ctThisDay(this)"39; title="39;"34;+now.getFullYear()+"34;-"34;+(parseInt(now.getMonth())+1)+"34;-"34;+i+"34;"39;>"34;+i+"34;</a></li>"34;;
}
}
var j=1;
for (i=thisMonthEndDay; i<6; i++){ // Next Month"39;s Date
lis += "34;<li class="39;nextMonthDate"39;>"34;+j+"34;</li>"34;;
j++;
}
lis += style;
var CalenderTitle = "34;<a href="39;javascript:void(0)"39; class="39;NextMonth"39; onclick=HS_calender(HS_DateAdd("39;m"39;,1,"39;"34;+now.getFullYear()+"34;-"34;+now.getMonth()+"34;-"34;+now.getDate()+"34;"39;),this) title="39;Next Month"39;>&raquo;</a>"34;;
CalenderTitle += "34;<a href="39;javascript:void(0)"39; class="39;LastMonth"39; onclick=HS_calender(HS_DateAdd("39;m"39;,-1,"39;"34;+now.getFullYear()+"34;-"34;+now.getMonth()+"34;-"34;+now.getDate()+"34;"39;),this) title="39;Previous Month"39;>&laquo;</a>"34;;
CalenderTitle += "34;<span class="39;sel"101;ctThisYear"39;><a href="39;javascript:void(0)"39; onclick="39;Calendersel"101;ctYear(this)"39; title="39;Click here to sel"101;ct other year"39; >"34;+now.getFullYear()+"34;</a></span>年<span class="39;sel"101;ctThisMonth"39;><a href="39;javascript:void(0)"39; onclick="39;Calendersel"101;ctMonth(this)"39; title="39;Click here to sel"101;ct other month"39;>"34;+(parseInt(now.getMonth())+1).toString()+"34;</a></span>月"34;;
if (arguments.length>1){
arguments[1].parentNode.parentNode.getElementsByTagName("34;ul"34;)[1].innerHTML = lis;
arguments[1].parentNode.innerHTML = CalenderTitle;
}else{
var CalenderBox = style+"34;<div class="39;calender"39;><div class="39;calenderTitle"39;>"34;+CalenderTitle+"34;</div><div class="39;calenderBody"39;><ul class="39;day"39;><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class="39;date"39; id="39;thisMonthDate"39;>"34;+lis+"34;</ul></div><div class="39;calenderBottom"39;><a href="39;javascript:void(0)"39; class="39;closeCalender"39; onclick="39;closeCalender(this)"39;>&times;</a><span><span><a href=javascript:void(0) onclick="39;_sel"101;ctThisDay(this)"39; title="39;"34;+todayString+"34;"39;>Today</a></span></span></div></div>"34;;
return CalenderBox;
}
}
function _sel"101;ctThisDay(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 Calendersel"101;ctYear(obj){
var opt = "34;"34;;
var thisYear = obj.innerHTML;
for (i=1970; i<=2020; i++){
if (i==thisYear){
opt += "34;<option value="34;+i+"34; sel"101;cted>"34;+i+"34;</option>"34;;
}else{
opt += "34;<option value="34;+i+"34;>"34;+i+"34;</option>"34;;
}
}
opt = "34;<sel"101;ct onblur="39;sel"101;ctThisYear(this)"39; onchange="39;sel"101;ctThisYear(this)"39; style="39;font-size:11px"39;>"34;+opt+"34;</sel"101;ct>"34;;
obj.parentNode.innerHTML = opt;
}
function sel"101;ctThisYear(obj){
HS_calender(obj.value+"34;-"34;+obj.parentNode.parentNode.getElementsByTagName("34;span"34;)[1].getElementsByTagName("34;a"34;)[0].innerHTML+"34;-1"34;,obj.parentNode);
}
function Calendersel"101;ctMonth(obj){
var opt = "34;"34;;
var thisMonth = obj.innerHTML;
for (i=1; i<=12; i++){
if (i==thisMonth){
opt += "34;<option value="34;+i+"34; sel"101;cted>"34;+i+"34;</option>"34;;
}else{
opt += "34;<option value="34;+i+"34;>"34;+i+"34;</option>"34;;
}
}
opt = "34;<sel"101;ct onblur="39;sel"101;ctThisMonth(this)"39; onchange="39;sel"101;ctThisMonth(this)"39; style="39;font-size:11px"39;>"34;+opt+"34;</sel"101;ct>"34;;
obj.parentNode.innerHTML = opt;
}
function sel"101;ctThisMonth(obj){
HS_calender(obj.parentNode.parentNode.getElementsByTagName("34;span"34;)[0].getElementsByTagName("34;a"34;)[0].innerHTML+"34;-"34;+obj.value+"34;-1"34;,obj.parentNode);
}
function HS_setDate(inputObj){
var calenderObj = document.cr"101;ateElement("34;span"34;);
calenderObj.innerHTML = HS_calender(new Date());
calenderObj.style.position = "34;absolute"34;;
calenderObj.targetObj = inputObj;
inputObj.parentNode.ins"101;rtBefore(calenderObj,inputObj.nextSibling);
}
</script>
<style>
body {font-size:12px}
td {text-align:center}
h1 {font-size:26px;}
h4 {font-size:16px;}
em {color:#999; margin:0 10px; font-size:11px; display:block}
</style>
</head>
<body>
<h1>Date Picker</h1>
<h4 style="34;border-bottom:1px solid #ccc"34;>ver:1.0</h4>
<table border="34;1"34; width="34;400"34; height="34;150"34;>
<tr>
<td>文本文本文本</td>
<td>点击输入框</td>
<td>文本文本文本</td>
</tr>
<tr>
<td>点击输入框</td>
<td><input type="34;text"34; style="34;width:70px"34; onfocus="34;HS_setDate(this)"34;>文本</td>
<td>文本文本文本</td>
</tr>
<tr>
<td>文本文本文本</td>
<td>点击输入框</td>
<td>文本<input type="34;text"34; style="34;width:70px"34; onfocus="34;HS_setDate(this)"34;>文本</td>
</tr>
</table>
<ul>
<li>不需要其他框架类库</li>
<li>支持ie6、firefox、opera</li>
<li>点击年份与月份可以下拉选择</li>
</ul>
</body>
</html>
