]<!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=utf-8" />
<title>无标题文档</title>
</head>
<script>
 // JavaScript Document
/**  
*  
* @author zjf  
* @version 2.1  
* @description  
*/  //---------------------------此js是日历控件的控制类-------------------------------------------------------//
var m = ["日", "一", "二", "三", "四", "五", "六"];
var checklist = ["20100817","20100819","20100910","20100823"];
var taday, month, month1, year,year1, week;// month,week是以零开始的
var date = new Date();
taday = date.getDate();
month = date.getMonth();
week = date.getDay();
year = date.getYear();  
var tadayStyle = "background-color:red;cursor:hand;font-size: 9pt;color: #000000;background-repeat: repeat-x;text-align: center;";//当天样式
var cunZaiStyle = "background-color:yellow;cursor:hand;font-size: 9pt;color: #000000;";  //已经被其他购买的 样式
var selectStyle = "background-color:blue;cursor:hand;font-size: 9pt;color: #000000;";// 选中的样式
var unSelectStyle = "cursor:hand;font-size: 9pt;color: #000000;text-align: center;border: 1px solid #CCCCCC;";// 未选中的样式
var formName = "productForm"// 刚开始必须初始化
var hiddenName = "date"// 刚开始必须初始化
var productId = 0;// 商品编号------------------------------
function getFirstDay(year, month) { // 得到当月的第一天是星期几
date.setYear(year);
date.setMonth(month);
date.setDate(1);
return date.getDay();
}
function isLeap_year(year) {// 判断是否是闰年
var d1 = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];// 平年
var d2 = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];// 闰年
if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0))
return d2;
else
return d1;
}
function resetDate(year, month, day) {
date.setYear(year);
date.setMonth(month);
date.setDate(day);
this.taday = date.getDate();
this.month = date.getMonth();
this.week = date.getDay();
this.year = date.getYear();
document.getElementById("table1").innerHTML = "";
createTable(7, 8, this.month,this.year);
this.month1 = this.month + 1;
if(this.month>=11){
month1=0;
createTable(7, 8, this.month1,this.year+1);}
else
createTable(7, 8, this.month1,this.year);
}
function createTable(X, Y, month,year) {
document.getElementById('year').value = this.year;
var sem = document.getElementById('month');
sem.options.selectedIndex = this.month+1;
//alert(month);//--------------------------------------------------
var t = document.createElement('table');
var day = 1;
for (var i = 0; i < Y; i++) {
var r = t.insertRow(); // 插入行
for (var j = 0; j < X; j++) {
var c = r.insertCell();// 插入列
c.setAttribute("width","32px");
c.setAttribute("align", "center");
if (i == 0) { // 设置月份
c.innerHTML = year + "年" + (month + 1) + "月";
c.setAttribute("id", "week");
c.colSpan = X;
c.style.cssText = "font-size: 9pt;color: #000000;background-color: #E0EEFD;text-align: center;";
break;
}
if (i == 1) { // 设置年份
c.innerHTML = m[j];
c.style.cssText = "font-size: 9pt;font-weight: bold;color: #000000;text-align: center;";
continue;
}
if (i == 2 && j < getFirstDay(year, month)) { // 设置第一天从星期几开始
c.innerHTML = "&nbsp;";
continue;
}
if (day > isLeap_year(year)[month]) { // 不能大于每个月的最大天数
c.innerHTML = "&nbsp;";
continue;
}
var oldTime = year + "" + month;
var ttime = new Date();
var newTime = ttime.getYear() + "" + ttime.getMonth();
var styleTemp;
var Dmonth = (month<=9)?"0"+""+(1+month):(1+month) ;
var Dday = (day<=9)?("0"+""+day):day ;
var Djt = year+""+Dmonth+""+Dday;
var tempboolean = false ;
try{
 if(""!=checklist)
   for(var z=0;z<checklist.length;z++){
   if(Djt==checklist[z]){
      styleTemp =cunZaiStyle;
      tempboolean = true ;
      //alert(tempboolean+"  "+Djt+":"+checklist[z]);
    } 
   }
}finally{
}

if (oldTime == newTime && day == ttime.getDate()&&tempboolean==false) {
styleTemp = tadayStyle;
c.setAttribute("status", 3);// 1表示未被选中 2表示被选中 3表示未选中的今天 4
// 表示选中的今天
} else if((oldTime != newTime || day != ttime.getDate())&&tempboolean==false) {
c.setAttribute("status", 1);// 1表示未被选中 2表示被选中 3表示未选中的今天 4
// 表示选中的今天

styleTemp = unSelectStyle;
}
c.setAttribute("id", month+""+day);
c.innerHTML = day;
c.style.cssText = styleTemp;
if(!tempboolean){
 c.setAttribute("onClick","clickAction("+year+","+ month+","+ month+""+day+", "+productId+")");
 if(c.getAttribute("onClick")==null){
c.removeAttribute("onClick");
c.onclick = function() {
clickAction(year, month, this.id, productId);
};
 }
}
var tempMonth, tempDay;
if (month + 1 < 10)
tempMonth = 0 + "" + (month + 1);
else
tempMonth = "" + (month + 1);
if (day < 10)
tempDay = 0 + "" + day;
else
tempDay = "" + day;
oldTime = year + tempMonth + tempDay;
var hid = document.getElementById(oldTime)
if (hid != null) {
c.style.cssText = selectStyle;
c.setAttribute("status", hid.getAttribute('dateDtatus'));
}
if (ttime.getMonth() + 1 < 10)
tempMonth = 0 + "" + (ttime.getMonth() + 1);
else
tempMonth = "" + (ttime.getMonth() + 1);
if (ttime.getDate() < 10)
tempDay = 0 + "" + ttime.getDate();
else
tempDay = "" + ttime.getDate();
newTime = ttime.getYear() + tempMonth + tempDay;
if (parseInt(oldTime) <= parseInt(newTime))
c.disabled = true;
day++;
}
}
document.getElementById("table1").appendChild(t);
t.setAttribute('border', '0');
t.style.cssText = "display:inline;float: left;height: 175px;width: 264px;border: 1px solid #99CDFF;margin-left: 5px;";
}
function clickAction(year, month,day , productId) {
    //var price = document.getElementById("price").value;  //单价
    //var zhekou = document.getElementById("zhekou").value; //折扣
    
var cell=document.getElementById(day);
if (formName == "") {
alert("请指定要提交的表单formName");
return false;
}
if (hiddenName == "") {
alert("请指定取值时的名字hiddenName");
return false;
}
var status = parseInt(cell.getAttribute('status'));
// alert(status);
var tempMonth, tempDay;
var id = 0;
if (month + 1 < 10){
tempMonth = 0 + "" + (month + 1);
id=cell.id.substring(1);
}else{
tempMonth = "" + (month + 1);
id=cell.id.substring(2);
}
if (id < 10)
tempDay = 0 + "" + id;
else
tempDay = "" +id;
var orderId = year + tempMonth + "" + tempDay;
var myform = document.getElementById(formName);
switch (status) {
case 1 :
    dayCount = dayCount +1;
var child = document.createElement("input");
child.type = "hidden";
child.readOnly = true;
child.name = hiddenName;
child.value = orderId;
child.id = orderId;
child.setAttribute("dateDtatus", 2);
myform.insertBefore(child);
cell.style.cssText = selectStyle;
cell.setAttribute("status", 2);
break;
case 2 :
    dayCount = dayCount -1;
myform.removeChild(document.getElementById(orderId));
cell.style.cssText = unSelectStyle;
cell.setAttribute("status", 1);
break;
case 3 :
    dayCount = dayCount + 1;
var child = document.createElement("input");
child.type = "hidden";
child.readOnly = true;
child.name = hiddenName;
child.value = orderId;
child.id = orderId;
child.setAttribute("dateDtatus", 4);
myform.insertBefore(child);
cell.style.cssText = selectStyle;
cell.setAttribute("status", 4);
break;
case 4 :
    dayCount = dayCount -1;
myform.removeChild(document.getElementById(orderId));
cell.style.cssText = unSelectStyle;
cell.style.cssText = tadayStyle;
cell.setAttribute("status", 3);
break;
}
   // document.getElementById("dayCount").innerHTML = dayCount+"天";
   // document.getElementById("moneyCount").innerHTML  = price*dayCount*zhekou/10;  //单价x天数x折扣
    
}
function test() {
var year = document.getElementById('year').value;
var month = document.getElementById('month').value;
// alert(isNaN(year));
if (isNaN(year) || year == "" || year == null)
year = new Date().getYear();
if (month == null || month == "" || isNaN(month) || month > 12 || month < 0){
month = new Date().getMonth();
year = new Date().getYear();
}
resetDate(year, month, 1);
}
function next() {
if(month==11){
year++;
month=-1;
}
resetDate(year, month+1, 1);
}
function back() {
if(month==0){
year--;
month=12;
}
resetDate(year, month - 1, 1);
}
function start(){
selmon();
year = new Date().getYear();
month = new Date().getMonth();
resetDate(year, month, 1);
}
function clear(obj) {
if (obj.options.length > 0) {
for (var i = (obj.options.length - 1); i >= 0; i--) {
obj.options[i] = null;
}
}
}
function selmon(){
var sem = document.getElementById('month');
clear(sem);
var op = document.createElement('option');
op.value = -1;
op.innerHTML ="当月";
sem.insertBefore(op);
for (var d = 0; d < 12; d++) {
var op = document.createElement('option');
op.value = d;
op.innerHTML = (d + 1) + "月";
sem.insertBefore(op);
}
}
//----------------------------下面不属于日历代码  此作为计算价格的--------------------------------------------------------//
var dayCount = 0;  //购买天数
</script>

解决方案 »

  1.   

    [code=HTML]<body onload="start()">
    <form action="order.do?method=add" method="post" name="productForm" id="productForm">
     <input type="text" name="year" id="year" value="2010" />
    <select name="month" id="month" onChange="test()">
    <option value="1">
    1月
    </option>
    </select>
     <input type="button" name="button" id="button" value="上一月" onClick="back()" height="300" />
     <input type="button" name="button" id="button" value="下一月" onClick="next()" height="300" />
     <div id="table1">
     </div>
    </form>
    </body>
    </html>
    [/code]
      

  2.   

       下面是第一次没有发布完的代码 ………… 中间多了几个插入源代码的那 几个标签   不知道怎么的它就不对呢    上面的js脚本 在IE上面可以正常显示和使用  可是在火狐上面就不行了! 这个日历是公司项目特殊要求而自己写的 没办法
      

  3.   

    3处的兼容性有问题:insertCell()改为insertCell(-1)、insertRow()改为insertRow(-1)、insertBefore(op)改为insertBefore(op,null)
      

  4.   

     谢谢楼上的了! 我按照你说的 该了那三处! 现在在火狐上面 日历可以显示出来了 可是 在初始化 有些的背景没有出来 !本来有些在今天之前或者已经购买过的是不能在点击了 可是在火狐上面还是可以点击。 我想估计那部分还是有问题吧try{
    if(""!=checklist)
    for(var z=0;z<checklist.length;z++){
    if(Djt==checklist[z]){
    styleTemp =cunZaiStyle;
    tempboolean = true ;
    //alert(tempboolean+" "+Djt+":"+checklist[z]);
    }  
    }
    }finally{
    }if (oldTime == newTime && day == ttime.getDate()&&tempboolean==false) {
    styleTemp = tadayStyle;
    c.setAttribute("status", 3);// 1表示未被选中 2表示被选中 3表示未选中的今天 4
    // 表示选中的今天
    } else if((oldTime != newTime || day != ttime.getDate())&&tempboolean==false) {
    c.setAttribute("status", 1);// 1表示未被选中 2表示被选中 3表示未选中的今天 4
    // 表示选中的今天styleTemp = unSelectStyle;
    }
    c.setAttribute("id", month+""+day);
    c.innerHTML = day;
    c.style.cssText = styleTemp;
    if(!tempboolean){
    c.setAttribute("onClick","clickAction("+year+","+ month+","+ month+""+day+", "+productId+")");
    if(c.getAttribute("onClick")==null){
    c.removeAttribute("onClick");
    c.onclick = function() {
    clickAction(year, month, this.id, productId);
    };
    }
    我估计是这部分还有问题
      

  5.   

      非常感谢各位的帮助………… 问题已经解决了!
    除三楼说的之外 还有一点 虽然不输入兼容性问题但是跟IE浏览器有区别 
    在火狐上面的 date = new Date();  会比IE少1900年  
    所以需要加上这样一个判断if(navigator.userAgent.indexOf("Firefox")>0)    
    {  
      year = year+1900;
    }这样问题就解决了    
      

  6.   

    看漏这点了不好意思,可以用getFullYear()来取年份。
      

  7.   

    <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 = "";
    /* http://www.codefans.net */
    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 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'>&raquo;</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'>&laquo;</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 CalenderselectYear(obj){
    var opt = "";
    var thisYear = obj.innerHTML;
    for (i=1970; i<=2020; i++){
    if (i==thisYear){
    opt += "<option value="+i+" selected>"+i+"</option>";
    }else{
    opt += "<option value="+i+">"+i+"</option>";
    }
    }
    opt = "<select onblur='selectThisYear(this)' onchange='selectThisYear(this)' style='font-size:11px'>"+opt+"</select>";
    obj.parentNode.innerHTML = opt;
    }
     
    function selectThisYear(obj){
    HS_calender(obj.value+"-"+obj.parentNode.parentNode.getElementsByTagName("span")[1].getElementsByTagName("a")[0].innerHTML+"-1",obj.parentNode);
    }
     
    function CalenderselectMonth(obj){
    var opt = "";
    var thisMonth = obj.innerHTML;
    for (i=1; i<=12; i++){
    if (i==thisMonth){
    opt += "<option value="+i+" selected>"+i+"</option>";
    }else{
    opt += "<option value="+i+">"+i+"</option>";
    }
    }
    opt = "<select onblur='selectThisMonth(this)' onchange='selectThisMonth(this)' style='font-size:11px'>"+opt+"</select>";
    obj.parentNode.innerHTML = opt;
    }
    function selectThisMonth(obj){
    HS_calender(obj.parentNode.parentNode.getElementsByTagName("span")[0].getElementsByTagName("a")[0].innerHTML+"-"+obj.value+"-1",obj.parentNode);
    }
    function HS_setDate(inputObj){
    var calenderObj = document.createElement("span");
    calenderObj.innerHTML = HS_calender(new Date());
    calenderObj.style.position = "absolute";
    calenderObj.targetObj = inputObj;
    inputObj.parentNode.insertBefore(calenderObj,inputObj.nextSibling);
    }
    </script>
    一个日期控件,可以在火狐跑。。直接在文件框中onfocus="HS_setDate(this)"即可
      

  8.   

    My97DatePicker  这个日历插件不错哦