码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-01-19 19:29:58      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:内容   time   表单   插入   his   char   微软   overflow   org   

自从接触了前端日历和日期部分的功能后,我发现网上使用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>";
}

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

标签:内容   time   表单   插入   his   char   微软   overflow   org   

原文地址:https://www.cnblogs.com/10manongit/p/12214996.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!