帶表單功能的日曆，可插入內容的日曆

時間 2019-11-08

標籤表單功能日曆插入內容欄目 HTML 简体版

原文原文鏈接

自從接觸了前端日曆和日期部分的功能後，我發現網上使用js操做日曆的插件真很少，很是好的也就極個別，代碼參差不齊，js對日期操做相比其它語言極其的不友好，若是作個日曆，裏面附帶預定表單，這種功能就很是頭疼了，然而這又很常見，好比預定掛號系統，這是很常見的。php

1、JavaScript實現的繁瑣性

若是你是個前端狂人，那麼給你一天半天時間，你開發一個日曆的插件應該不以爲有什麼，爲了快速精確的開發完整的功能，想要時間短，準確率高，還須要藉助後臺程序，例如php。php作日曆簡直太簡單了，作爲一個前端不禁得點個贊！html

2、一個實現自由預定功能的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">jquery

<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">web

<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(){ajax

$("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.phppost

$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>";
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。