带表单功能的日历，可插入内容的日历

自从接触了前端日历和日期部分的功能后，我发现网上使用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="一月"/>
&nbsp;&nbsp;
<input type="button"  value="二月" />
&nbsp;&nbsp;
<input type="button"  value="三月"/>
&nbsp;&nbsp;
<input type="button"  value="四月" />
&nbsp;&nbsp;
<input type="button"  value="五月"/>
&nbsp;&nbsp;
<input type="button"  value="六月" />
&nbsp;&nbsp;
<input type="button"  value="七月"/>
&nbsp;&nbsp;
<input type="button"  value="八月"/>
&nbsp;&nbsp;
<input type="button"  value="九月" />
&nbsp;&nbsp;
<input type="button"  value="十月"/>
&nbsp;&nbsp;
<input type="button"  value="十一月"/>
&nbsp;&nbsp;
<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>";
}

一、JavaScript实现的繁琐性

二、一个实现自由预约功能的demo

猜你喜欢