日历控件，可以在此基础上做更多的扩展，如实现行程安排等

日历控件

.rili {

margin: 30px 0px;

overflow: hidden;

text-align: center;

color: #666

}

.low_calendar {

overflow: hidden;

border: 1px solid #c8d2dc;

}

.low_calendar h1 {

width: 100%;

background: #ff6f7e;

font-size: 14px;

height: 30px;

line-height: 30px;

text-align: center;

color: #fff;

font-weight: 100;

box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

position: relative

}

.calGrid table {

width: 100%;

border-collapse: collapse;

margin: 0;

padding: 0;

}

.calGrid table th {

background-color: #fff;

border-left: 1px solid #whiteSmoke;

font-size: 12px;

height: 30px;

line-height: 30px;

text-align: center;

vertical-align: middle;

color: #999;

color: #505050;

border-bottom: 1px solid #C8C8C8;

}

.calGrid table td {

width: 12%;

height: 40px;

line-height: 40px;

font-size: 16px;

font-weight: 700 text-align : center;

color: #4A5056;

border-bottom: 1px solid #C8C8C8;

border-left: 1px solid #ccc;

position: relative;

overflow: hidden;

cursor: pointer;

text-align: center;

}

.calGrid table td img {

position: absolute;

left: 0;

top: 0;

display: none

}

.calGrid table td.curr img {

display: block

}

.calGrid table td.disable {

color: #ED5565;

}

.calGrid table td:first-child {

border-left: none;

}

.calGrid table tr:last-child td {

border-bottom: none;

}

.calGrid table td.holiday {

font-size: 12px;

}

.calGrid table th.week_day, .calGrid table td.week_day {

color: #ED5565

}

.calGrid table td.curr {

line-height: 25px;

font-size: 13px;

color: #fff;

background: #ff6f7e;

-moz-box-shadow: 2px #7d92a7 inset;

-webkit-box-shadow: 2px #7d92a7 inset;

box-shadow: 2px #7d92a7 dcdeeb;

}

.calGrid table td.curr span {

display: block;

font-size: 12px;

line-height: 10px;

}

.low_calendar h1 .ldate {

width: 25px;

height: 25px;

background: url(images/ldate.png) no-repeat;

float: left;

position: absolute;

top: 2px;

left: 10px;

overflow: hidden;

text-indent: -99999px

}

.low_calendar h1 .rdate {

width: 25px;

height: 25px;

background: url(images/rdate.png) no-repeat;

float: right;

position: absolute;

top: 2px;

right: 10px;

overflow: hidden;

text-indent: -99999px

}

/**

* User: yuluo

* Date: 2015-05-08

* Time: 下午3:08

* Desc:实现生成指定月份的日历信息 在此基础上可以无限遐想和扩展...

*/

date_default_timezone_set("Asia/Shanghai");

$time_now = time(); //strtotime("2015-02-04");

if($_REQUEST["date"]){

$time_now = strtotime($_REQUEST["date"]);

}

function getCurMonthFirstDay($date)

{

return date('Y-m-01', strtotime($date));

}

function getCurMonthLastDay($date)

{

return date('Y-m-d', strtotime(date('Y-m-01', strtotime($date)) . ' +1 month -1 day'));

}

$current_y = date("Y", $time_now);

$current_m = date("m", $time_now);

$next_m = date('Ymd', strtotime(date('Y-m-01', $time_now) . ' +1 month'));

$pre_m = date('Ymd', strtotime(date('Y-m-01', $time_now) . ' -1 month'));

?>

上一月<?php echo($current_y); ?>年<?php echo($current_m); ?>月下一月

周日	周一	周二	周三	周四	周五	周六

//$time_now = strtotime("2015-05-11");

$str_time_now = date("Y-m-d", $time_now); 字符串格式的当前时间

$current_month_first_day = getCurMonthFirstDay($str_time_now); /当前月的第一天

$current_month_first_w_val = intval(date("w", strtotime($current_month_first_day))); //当前月第一天是一周的第几天 周日(0)是第一天

$current_month_last_day = getCurMonthLastDay($str_time_now); 当前月的最后一天

$current_week_val = date("w", $time_now);

$current_day_val = date("j", $time_now);

$last_day_val = date("j", strtotime($current_month_last_day)); 当前月最后一天的天索引

$strart_time = false;

$int_day_val = 1;

$ctrl_step = $last_day_val + $current_month_first_w_val; 控件结束的位置索引

for ($i = 0; $i < 42; $i++) {

if($i == 0){ ?>

if ($i == $current_month_first_w_val) {

$strart_time = true;

}

if ($i >= $ctrl_step) {

$strart_time = false;

}

if ($strart_time) {

$tem_current_date = date("Y-m-d",strtotime(date("Y-m", $time_now).("-").strval($int_day_val)));

$str_td_class = "";

if (($i%7)==0 || (($i + 1) % 7) == 0){

$str_td_class = "week_day";

}

?>

<?php echo($int_day_val); ?>

$int_day_val++;

} else {

?>

}

if ((($i + 1) % 7) == 0) {

?>

}

}

?>

$(function(){

console.log($("td [date='2015-05-12']"));

});

相关标签：php

本文原创发布php中文网，转载请注明出处，感谢您的尊重！