functions variable functions variable
<!-- js -->
var today = new Date();
var date = new Date();
var month = date.getMonth();
var year = date.getFullYear();
var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var data = {};
//to pre-check checkboxes, use this format.
//var data = {'Wed Jul 01 2009':true,'Thu Jul 02 2009':true};
var checkBox = $("<input type='checkbox'/>");
var checked1 = false;
function fillCalendar(){
month = date.getMonth();
year = date.getFullYear();
var offset=date.getDay();
var clone;
var checked = false;
$("#month").text(months[month]);
$("#calendar .day").each(function(i){
$(this).removeClass("today");
if(offset+date.getDate()-1==i){
checked = (data[date.toDateString()])?true:false;
$(this).html(date.getDate());
clone = checkBox.clone().attr("title",date.toDateString()).prependTo(this);
if(checked)clone.click();
if(date.toDateString() == today.toDateString()) $(this).addClass("today");
date.setDate(date.getDate()+1);
} else {
$(this).html("");
}
});
date.setMonth(month);
date.setFullYear(year);
$(".day input:checkbox").unbind("click").click(function(){
var title = $(this).attr("title");
if(this.checked){
data[title] = true;
} else {
delete data[title];
}
return true;
});
}
$(document).ready(function(){
$("#selectAll").click(function(){$("#calendar input:checkbox").each(function(){
if(checked1==this.checked) this.click();
});checked1=!checked1;return false;});
$("#calendar .selectRow").click(function(event){
var checked2 = !$(event.target).parent().parent().find("input:checkbox")[0].checked;
$(event.target).parent().parent().find("input:checkbox").each(function(){ if(this.checked!=checked2)this.click();});
return false;
});
$("#prevMonth").click(function(){date.setMonth(date.getMonth()-1);fillCalendar();});
$("#nextMonth").click(function(){date.setMonth(date.getMonth()+1 );fillCalendar();});
$("#done").click(function(){
var theForm = $("#theForm");
$.each(data, function(key, val){
theForm.append("<input type='hidden' name='dates[]' value='" + key + "'>");
});
theForm.submit();
});
date.setDate(1);
fillCalendar();
});my style table for this calendar format
<!-- style.css -->
table { width: 400px; }
.top { background-color: #C0C0C0; }
.leader { background-color: #D7D7D7; }
.days { background-color: #EDEDED; }
.today { background-color: #909090; color: #FFFFFF; }
.button { width: 48px; }
.wideButton { width: 98px; }
td { width: 50px; height: 25px; text-align: center; }index page form index page form
<!-- index.php -->
<?php
if(isset($_POST) && !empty($_POST)){
echo "<pre>";
print_r($_POST);
die();
}
?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<form method="post" action="#" id="theForm">
<table cellpadding="0" cellspacing="2" id="calendar">
<tr class="top">
<td><input type="button" class="button" id="prevMonth" value="<" /></td>
<td colspan=2 id="month"> </td>
<td><input type="button" class="button" id="nextMonth" value=">" /></td>
<td colspan=2><input type="button" value="Select All" class="wideButton" id="selectAll"></td>
<td colspan=2><input type="button" value="Done" class="wideButton" id="done" /></td>
</tr>
<tr class="leader">
<td></td>
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr>
<tr class="days" id="test">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr>
<td class="leader" colspan="8"> </td>
</tr>
</table>
<input type="hidden" name="action" value="renew" />
</form>
</body>
</html>
如何使我的复选框ajax php无法跳过日期。 例如，我检查了5.02.2015，无法检查7.02.2015 只能在续集中检查6.02.2015 ..