求javascript月份选择器

Question

Here has a free javascript calendar control
http://www.softcomplex.com/products/tigra_calendar/

Answer 1

// JScript 文件
document.write("<DIV id='cc' style='BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 12px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 12px; Z-INDEX: 2; BACKGROUND: #ffffff; FILTER: Alpha(opacity=85); LEFT: 505px; VISIBILITY: hidden; PADDING-BOTTOM: 12px; BORDER-LEFT: #000000 1px solid; WIDTH: 200px; LINE-HEIGHT: 22px; PADDING-TOP: 12px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; TOP: 419px; HEIGHT: 90px'></DIV>");
document.write("<style>td {font-family: Arial, Helvetica, sans-serif;font-size: 12px;}table{border-collapse:collapse} .sel{font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:pointer;text-decoration: none; background-color:#DEDEEF}body {margin-left:0px;margin-top: 0px;}</style>")var name;
function dateSelect(objname){
  cc.style.visibility="visible";
  cc.style.filter="Alpha(opacity=85)";
  cc.style.left=document.body.scrollLeft+window.event.clientX+2;
  cc.style.top=document.body.scrollTop+window.event.clientY+2;
  name = objname;
  showSelect(name);
}
function hiddeninfo(){
  cc.style.visibility="hidden";
}
function RunNian(The_Year){
  if ((The_Year%400==0) || ((The_Year%4==0) && (The_Year%100!=0)))
    return true;
  else
    return false;
}function GetWeekday(The_Year,The_Month)
 {
   var Allday;
   Allday = 0;
   if (The_Year>2000){
    for (i=2000;i<The_Year; i++){
     if (RunNian(i)) {
     Allday += 366;
    }else {
     Allday += 365;
    }
   }
     for (i=2; i<=The_Month; i++){
       switch (i){
     case 2 :
       if (RunNian(The_Year))
         Allday += 29;
       else
         Allday += 28;
       break;
     case 3 : Allday += 31; break;
     case 4 : Allday += 30; break;
     case 5 : Allday += 31; break;
     case 6 : Allday += 30; break;
     case 7 : Allday += 31; break;
     case 8 : Allday += 31; break;
     case 9 : Allday += 30; break;
     case 10 : Allday += 31; break;
     case 11 : Allday += 30; break;
     case 12 :  Allday += 31; break;
   }
  }
 }
 return (Allday+6)%7;
}function chooseday(The_Year,The_Month,The_Day){
   var Firstday;
   var completely_date;
   if (The_Day!=0)
   completely_date = The_Year + "-" + The_Month + "-" + The_Day;
   else
   completely_date = "";
   //showdate 只是一个为了显示而采用的东西，
   //如果外部想引用这里的时间，可以通过使用 completely_date引用完整日期
   //也可以通过The_Year,The_Month,The_Day分别引用年，月，日
   //当进行月份和年份的选择时，认为没有选择完整的日期
   Firstday = GetWeekday(The_Year,The_Month);
   ShowCalender(The_Year,The_Month,The_Day,Firstday);
}function chooses(The_Year,The_Month,The_Day){
 var obj2 = document.getElementById(name);
  var Firstday;
  var completely_date;
  if (The_Day!=0)
    completely_date = The_Year + "-" + The_Month + "-" + The_Day;
  else
  completely_date = "";
  obj2.value = completely_date;
  hiddeninfo();
 }function nextmonth(The_Year,The_Month){
  if (The_Month==12)
    chooseday(The_Year+1,1,0,name);
  else
    chooseday(The_Year,The_Month+1,0,name);
}function prevmonth(The_Year,The_Month){
  if (The_Month==1)
    chooseday(The_Year-1,12,0);
  else
    chooseday(The_Year,The_Month-1,0);
}function prevyear(The_Year,The_Month){
  chooseday(The_Year-1,The_Month,0);
}function nextyear(The_Year,The_Month){
  chooseday(The_Year+1,The_Month,0);
}function ShowCalender(The_Year,The_Month,The_Day,Firstday){
  var ycdate="";
  var showstr;
  var Month_Day;
  var ShowMonth;
  var today;
  today = new Date();
  switch (The_Month){
    case 1 : ShowMonth = "1月"; Month_Day = 31; break;
    case 2 :
      ShowMonth = "2月";
      if (RunNian(The_Year))
     Month_Day = 29;
      else
     Month_Day = 28;
      break;
    case 3 : ShowMonth = "3月"; Month_Day = 31; break;
    case 4 : ShowMonth = "4月"; Month_Day = 30; break;
    case 5 : ShowMonth = "5月"; Month_Day = 31; break;
    case 6 : ShowMonth = "6月"; Month_Day = 30; break;
    case 7 : ShowMonth = "7月"; Month_Day = 31; break;
    case 8 : ShowMonth = "8月"; Month_Day = 31; break;
    case 9 : ShowMonth = "9月"; Month_Day = 30; break;
    case 10 : ShowMonth = "10月"; Month_Day = 31; break;
    case 11 : ShowMonth = "11月"; Month_Day = 30; break;
    case 12 : ShowMonth = "12月"; Month_Day = 31; break;
  }
 showstr = "";
 showstr = "<Table cellpadding=0 cellspacing=0 border=1 bordercolor=#C0D0E8 width=95% align=center valign=top>"; //上边框颜色
 showstr +=  "<tr><td width=0 class='sel' onclick=prevyear("+The_Year+"," + The_Month + ")>3</td><td width=0>&nbsp;&nbsp;&nbsp;" + The_Year + "年&nbsp;</td><td width=0 onclick=nextyear("+The_Year+","+The_Month+") class='sel'>4</td><td width=0 class='sel' onclick=prevmonth("+The_Year+","+The_Month+")>3</td><td width=40 align=center>" + ShowMonth + "</td><td width=0 onclick=nextmonth("+The_Year+","+The_Month+") class='sel'>4</td></tr>";
 showstr +=  "<tr><td align=center width=100% colspan=6>";
 showstr +=  "<table cellpadding=0 cellspacing=0 border=1 bordercolor=#C0D0E8 width=100%>";//内边框颜色
 showstr += "<Tr align=center bgcolor=#C0D0E8> ";//星期td背景
 showstr += "<td><strong><font color=#ff0000>日</font></strong></td>";
 showstr += "<td><strong><font color=#000000>一</font></strong></td>";
 showstr += "<td><strong><font color=#000000>二</font></strong></td>";
 showstr += "<td><strong><font color=#000000>三</font></strong></td>";
 showstr += "<td><strong><font color=#000000>四</font></strong></td>";
 showstr += "<td><strong><font color=#000000>五</font></strong></td>";
 showstr += "<td><strong><font color=#ff0000>六</font></strong></td>";
  showstr += "</Tr><tr>"; for (i=1; i<=Firstday; i++)
    showstr += "<Td align=center bgcolor=#ffffff>&nbsp;</Td>";//月前空日日期背景 for (i=1; i<=Month_Day; i++){
   if ((The_Year==today.getYear()) && (The_Month==today.getMonth()+1) && (i==today.getDate())){
     bgColor = "#DEDEEF";//当前日期td颜色
     ycdate = "<b><font color='#ff0000'>" + i + "</font></b>";
    }else{
     bgColor = "#DEDEEF";//大部分td颜色
     ycdate=i+"";
      }
   if (The_Day==i) bgColor = "#ffffff";//选择日期td颜色
     showstr += "<td align=center bgcolor=" + bgColor + " style='cursor:pointer;' onclick=chooses(" + The_Year + "," + The_Month + "," + i + ")>" + ycdate + "</td>";
    Firstday = (Firstday + 1)%7;
    if ((Firstday==0) && (i!=Month_Day)) showstr += "</tr><tr>";
    }
  if (Firstday!=0) {
    for (i=Firstday; i<7; i++)
      showstr += "<td align=center bgcolor=#ffffff>&nbsp;</td>";//月尾空日td背景
     showstr += "</tr>";
   }
  showstr += "</tr></table></td></tr><tr><td colspan='7'><div  align='center' onclick='hiddeninfo()' style='cursor:pointer;'>返回</div></td></tr></table>";
  cc.innerHTML = showstr;
} function showSelect(name){
 var The_Year,The_Day,The_Month;
 var today;
 var Firstday;
 today = new Date();
 The_Year = today.getYear();
 The_Month = today.getMonth() + 1;
 The_Day = today.getDate();
 Firstday = GetWeekday(The_Year,The_Month);
 ShowCalender(The_Year,The_Month,The_Day,Firstday);
}
页面
首先导入
sat-->控件的id
在html控件上添加-->
onClick="dateSelect('sat')

Answer 2

多谢四楼提醒，其实我昨晚就在写这个东西，逻辑性的东西写出来了，但对javascripe不是太熟，不知道该怎么把要显示的东西弄到页面上，所以才来问一下，看有没有朋友写过类似的东西，或者给个提示也好
也要感谢楼上的朋友，您提供的代码很有借鉴意义

Answer 3

要显示的弄到页面？？？
你想用DIV还是TABLE？
给他们一个ID，替换这个ID的值即可

Answer 4

基本搞定了：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
function getMonth(date){
this.now = new Date();
var nowYear = this.now.getFullYear();
var nowMonth = this.now.getMonth();
var nowday = this.now.getDate(); //当前时间
var inDates = new Array(); //传入的时间，即当前正在显示工资所属的月份
var inYear = "";
var inMonth = "";
var monthCount = 12; //要显示出的月份的数量
inDates = date.toString().split(".");
if(inDates.length == 2){
inYear = inDates[0]; //取得当前错所显示的工资的月份
inMonth = inDates[1];
}else{
inYear = nowYear; //若传入月份为空或有误，则取距当前月份最近的工资月份
inMonth = nowMonth;
}
if(inYear == nowYear){
if(nowday >= 23){
monthCount = nowMonth + 1; //对当前年份月份的处理
}else{
monthCount = nowMonth;
}
}
var viewYear = inYear; //当前正在显示的年份

var addMonth = inYear.toString() + ".";
var lastYear = (inYear - 1).toString() + "." + 13;
var nextYear = (inYear - 1 + 2).toString() + "." + 13;

var str = "<button onclick='javascript:getMonth(" +  lastYear + ")'><strong><<</strong></button>";
if(inYear <= nowYear){
for(var i = 0; i < monthCount ; i++){
if( (i + 1) == inMonth){
str = str +"<strong>" + addMonth + (i + 1) + "</strong>";
}else{ 
str = str + "<a href='#' onclick='javascript:gotoMonth(" + addMonth + (i + 1) + ")'>" + addMonth + (i + 1) + "</a>";
}
if(i < (monthCount -1)) 
str = str + "|";
}
if(inMonth >= 12 && inYear < nowYear)
str = str +  "<button onclick='javascript:getMonth(" +  nextYear + ")'><strong>>></strong></button>";
}
asd.innerHTML = str;
// document.getElementById(asd).innerHTML = str;

// document.write(str);
}
function gotoMonth(selectMonth){
alert("确定要查看" + selectMonth + "的工资记录？");
}
</script><body> <input type="button" onclick="javascript: getMonth(2008.3)" value="sdddddddddddddds"/>
<div id="asd" style="background-color:#66FFFF" >

</div>
</body>
</html>