自从接触了前端日历和日期部分的功能后，我发现网上使用js操作日历的插件真不多，非常好的也就极个别，代码良莠不齐，js对日期操作相比其它语言极其的不友好，如果做个日历，里面附带预约表单，这种功能就非常头疼了，然而这又很常见，比如预约挂号系统，这是很常见的。
一、JavaScript实现的繁琐性
如果你是个前端狂人，那么给你一天半天时间，你开发一个日历的插件应该不觉得有什么，为了快速精确的开发完整的功能，想要时间短，准确率高，还需要借助后台程序，例如php。php做日历简直太简单了，做为一个前端不由得点个赞！
二、一个实现自由预约功能的demo
地址：http://chen.web2014.cn/zzz/tj...
<!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>
<script src="http://ajax.aspnetcdn.com/aja...
<style>
*{ margin: 0; padding: 0; }
.date_top { margin-top: 70px; }
ul { margin: 0px auto; width: 100%; max-width: 1000px; font-family: "微软雅黑"; color: #ccc; overflow: auto; zoom: 1; padding-left: 1px; }
li { float: left; width: 14%; height: 50px; line-height: 50px; border: 1px solid #CCC; margin-left: -1px; margin-top: -1px; line-height: 50px; list-style: none; text-align: center; font-size: 16px; }
li.ti { font-weight: bold; background: #666; color: #fff; }
.color { color: #000; background: #f2f2f2; }
.buts { clear: both; text-align: center; padding: 50px 0; }
</style>
</head>
<body>
<ul class="date_top">
<li class="ti">周一</li> <li class="ti">周二</li> <li class="ti">周三</li> <li class="ti">周四</li> <li class="ti">周五</li> <li class="ti">周六</li> <li class="ti">周日</li>
</ul>
<ul class="date_content">
</ul>
<!--这下面是两个切换-->
<div class="buts">
<input type="button" value="一月"/> <input type="button" value="二月" /> <input type="button" value="三月"/> <input type="button" value="四月" /> <input type="button" value="五月"/> <input type="button" value="六月" /> <input type="button" value="七月"/> <input type="button" value="八月"/> <input type="button" value="九月" /> <input type="button" value="十月"/> <input type="button" value="十一月"/> <input type="button" value="十二月"/>
</div>
<script>
$(function(){
$("input[type=button]").click(function(){
var ind=$(this).index();
qinqiu(ind+1);
})
function qinqiu(yuefen){
$.ajax({
url:'ajax.php',
type:'post',
data:{"nian":2015,"yue":yuefen,"ri":7,"shi":15,"fen":50,"miao":10},
dataType: "html",
success:function(data){
$(".date_content").html(data);
}
})
}
qinqiu(1);
})
</script>
</body>
</html>
ajax.php
$nian=$_POST["nian"];
$yue=$_POST["yue"];
$ri=$_POST["ri"];
$shi=$_POST["shi"];
$fen=$_POST["fen"];
$miao=$_POST["miao"];
$mytime=mktime($shi, $fen, $miao, $yue, $ri, $nian); //------------传递一个参数 //echo "创建日期是 " . date("Y-m-d h:i:sa", $mytime);
$monthsNum=array(31,28,31,30,31,30,31,31,30,31,30,31); //------------循环数组
//判断是否为闰年,闰年重新设置数组
$isleapyear = $nian%4;
if($isleapyear==0){
$monthsNum[1]=29;
}
//获取日期是周几
$zhou=array("Sunday"=>7,"Monday"=>1,"Tuesday"=>2,"Wednesday"=>3,"Thursday"=>4,"Friday"=>5,"Saturday"=>6);
$zhouji=$zhou[date("l",$mytime)]; //------echo $zhouji;
//获取我要输出时候前面有几个空格,计算为负数就加7
$kongge=$zhouji-$ri%7;
if($kongge<0){$kongge+=7;};
//echo "<br/>".$kongge;
//当月应该输出的表格为
for ($i=1;$i<=$kongge;$i++){
echo "<li>空</li>";
}
//循环这个月的数据，循环次数为这个月天数 $monthsNum[$yue]
for ($i=1;$i<=$monthsNum[$yue-1];$i++){
//这里判断我们的数据是否在里面
echo "<li class='color'>".$i."号</li>";
}
for ($i=1;$i<=42-$kongge-$monthsNum[$yue-1];$i++){
echo "<li>$i</li>";
}