一款漂亮的JS日期選擇器代碼

2024-09-05 12:22:10

字體：大中小

來源：轉載

供稿：網友

很漂亮的一款JavaScript日期選擇器，支持多種瀏覽器，點擊年份和月份可以出現下拉選擇框，而它不需要任何第三方JS框架支持。

<html><head><title>JS日期選擇器</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;}function WeekDay(date){	var theDate;	if (typeof(date)=="string"){theDate = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2]);}	if (typeof(date)=="object"){theDate = date}	return theDate.getDay();}function HS_calender(){	var lis = "";	var style = "";	style +="<style type='text/css'>";	style +=".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}";	style +=".calender ul {list-style-type:none; margin:0; padding:0;}";	style +=".calender .day { background-color:#EDF5FF; height:20px;}";	style +=".calender .day li,.calender .date li{ float:left; width:14%; height:20px; line-height:20px; text-align:center}";	style +=".calender li a { text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";	style +=".calender li a:hover { color:#f30; text-decoration:underline}";	style +=".calender li a.hasArticle {font-weight:bold; color:#f60 !important}";	style +=".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}";	style +=".selectThisYear a, .selectThisMonth a{text-decoration:none; margin:0 2px; color:#000; font-weight:bold}";	style +=".calender .LastMonth, .calender .NextMonth{ text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}";	style +=".calender .LastMonth { float:left;}";	style +=".calender .NextMonth { float:right;}";	style +=".calenderBody {clear:both}";	style +=".calenderTitle {text-align:center;height:20px; line-height:20px; clear:both}";	style +=".today { background-color:#ffffaa;border:1px solid #f60; padding:2px}";	style +=".today a { color:#f30; }";	style +=".calenderBottom {clear:both; border-top:1px solid #ddd; padding: 3px 0; text-align:left}";	style +=".calenderBottom a {text-decoration:none; margin:2px !important; font-weight:bold; color:#000}";	style +=".calenderBottom a.closeCalender{float:right}";	style +=".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}";	style +="</style>";	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 id="70qarhlowxag"    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>"+i+"</li>";		}else{			lis += "<li>"+i+"</li>";		}			}	var j=1;	for (i=thisMonthEndDay; i<6; i++){  // Next Month's Date		lis += "<li id="70qarhlowxag"    class='nextMonthDate'>"+j+"</li>";		j++;	}	lis += style;	var CalenderTitle = "»";	CalenderTitle += "«";	CalenderTitle += "<span id="70qarhlowxag"    class='selectThisYear'>"+now.getFullYear()+"</span>年<span id="70qarhlowxag"    class='selectThisMonth'>"+(parseInt(now.getMonth())+1).toString()+"</span>月"; 	if (arguments.length>1){		arguments[1].parentNode.parentNode.getElementsByTagName("ul")[1].innerHTML = lis;		arguments[1].parentNode.innerHTML = CalenderTitle;	}else{		var CalenderBox = style+"<div   id="70qarhlowxag"   class='calender'><div   id="70qarhlowxag"   class='calenderTitle'>"+CalenderTitle+"</div><div   id="70qarhlowxag"   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   id="70qarhlowxag"   class='calenderBottom'>×<span><span>Today</span></SPAN>
</div>
</div>
<div   id="70qarhlowxag"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="70qarhlowxag"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1558139.html'>JavaScript跳動的時間電子鐘</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1558141.html'>網頁倒計時的JS代碼</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="70qarhlowxag"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流