嘿,有些人是javascript和jquery的新手但是对于一个项目,我需要创建一个基于web的日历,显示当前月份,启用月份切换并显示月份的正确日期,我的问题是我不断得到一个我无法理解的错误,我已经尝试多次更改代码但没有任何作用...请协助ps我当前的功能只能切换到当前年度的任何协助,切换到明年之后,即从2016年12月到2017年1月或上一年即2016年1月至2015年12月,这里是我的代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type='text/javascript' src='/my project2/assets/javascript/jquery/jquery.js'></script>
<style type="text/css">
#calendar-container{
padding:10px;
width:832px;
height:415px;
text-align:center;
border-radius:3px;
border:1px solid #e1e1e1;
font-size:16px;
font-family:arial;
min-width:832px;
}
#prev{
float:left;
}
#next{
float:right;
}
#calendar-container>div{
padding:0;
margin-bottom:10px;
}
#calendar-month-year{
margin:5px;
}
#calendar-dates > table > tr > td{
padding:20px;
border:1px solid #e1e1e1;
}
#events{
font-size: 14px;
position: relative;
top: -14px;
left: -15px;
border-radius:5px;
color:#00868b;
font-size:15px;
}
a{
padding:20px;
text-decoration:none;
}
table{
border:1px solid #eee;
width:832px;
}
#today{
background-color: red;
margin: 0;
padding: 20px;
border-radius: 30px;
}
</style>
<script type="text/javascript">
$(function(){
var d=new Date();
var month=d.getMonth();
var year=d.getFullYear(); //2014
var daysinMonth=daysInMonth(month, year);
var calendar="";
$("#calendar").click(function(){
$("#calendar-container").addClass("active");
$("#calendar").html("close calendar");
calendarGenerator();
});
$("#prev").click(function(prevMonth){
prevMonth=month-1;
$("table").remove();
calendarGenerator(prevMonth);
});
$("#next").click(function(nextMonth){
nextMonth=month+1;
$("table").remove();
calendarGenerator(nextMonth);
});
function daysInMonth(month, year){
//added the one so it would pick february, apparently here 1-jan 2-feb not 0-jan and 1-feb
return new Date(year, month+1, 0).getDate();
}
function calendarGenerator(nextMonth){
var monthName=["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var today=d.getDate();
daysToEndMonth=daysinMonth-today;
if(nextMonth==null){
month=month; //0-11
}else{
month=nextMonth;
}
var firstDate=monthName[month]+" "+1+" "+year;//September 1 2014
var tmp=new Date(firstDate).toDateString();//Mon Sep 01 2014...
var firstDay=tmp.substring(0, 3); //Mon
var dayName=["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var dayNo=dayName.indexOf(firstDay);//1
var days=new Date(year, month+1, 0).getDate();//30 //Tue Sep 30 2014...
var calendar=getCalendar(dayNo, days, today);
document.getElementById("calendar-month-year").innerHTML=monthName[month]+" "+year;
document.getElementById("calendar-dates").appendChild(calendar);
}
//document.getElementById("calendar-dates").innerHTML=calendar;
function getCalendar(dayNo, days, today){
var table=document.createElement("table");
var tr=document.createElement("tr");
//row for the day letters
for(var c=0; c<=6; c++){
var td=document.createElement("td");
td.innerHTML='SMTWTFS'[c];
tr.appendChild(td);
}
table.appendChild(tr);
//create 2nd row
tr=document.createElement("tr");
var c;
for(c=0; c<=6; c++){
if(c==dayNo){
break;
}
var td=document.createElement("td");
td.innerHTML="";
tr.appendChild(td);
}
var count=1;
for(; c<=6; c++){
var td=document.createElement("td");
td.innerHTML="<a href='#' class='days'><span id='events'>"+6+"</span>"+count+"</a>";
count++;
if(count==today+1){
td.innerHTML="<a href='#' id='today' class='days' style=''><span id='events'></span>"+(count-1)+"</a>";
}
tr.appendChild(td);
}
table.appendChild(tr);
//rest of the daterows
for(var r=3; r<=6; r++){
tr=document.createElement("tr");
for(var c=0; c<=6; c++){
if(count>days){
table.appendChild(tr);
return table
}
if(count==today+1){
td.innerHTML="<a href='#' id='today' class='days'><span id='events'></span>"+(count-1)+"</a>";
}
var td=document.createElement("td");
td.innerHTML="<a href='#' class='days'><span id='events'>"+14+"</span>"+count+"</a>";
count++;
tr.appendChild(td);
}
table.appendChild(tr);
}
}
});
</script>
</head>
<body>
<button id='calendar'>open calendar</button><br/>
<div id="calendar-container" class="inactive">
<div id="calendar-header">
<span id="calendar-month-year"></span>
<button id="prev">prev</button>
<button id="next">next</button>
</div>
<span id="calendar-dates"></span>
</div>
</body>
</html>