日历控件,可以在此基础上做更多的扩展,如实现行程安排等
<html> <head> <title>日历控件</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <style type="text/css"> .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 } </style> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <?php /** * 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')); ?> <p class="rili"> <p class="chosedate"> <p class="low_calendar"> <h1><a class="ldate" href="date_ctrl.php?date=<?php echo($pre_m); ?>">上一月</a><span><?php echo($current_y); ?>年<?php echo($current_m); ?>月</span><a class="rdate" href="date_ctrl.php?date=<?php echo($next_m); ?>">下一月</a></h1> <p class="calGrid"> <table cellspacing="1" cellpadding="1"> <tbody> <tr> <th class="week_day">周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th class="week_day">周六</th> </tr> <?php //$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){ ?> <tr> <?php } 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"; } ?> <td date="<?php echo($tem_current_date); ?>" class="<?php echo($str_td_class); ?>"><?php echo($int_day_val); ?></td> <?php $int_day_val++; } else { ?> <td class="null"> </td> <?php } if ((($i + 1) % 7) == 0) { ?> </tr> <?php } } ?> </tbody> </table> </p> </p> </p> </p> <script type="text/javascript"> $(function(){ console.log($("td [date='2015-05-12']")); }); </script> </body> </html>
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
2 몇 주 전ByDDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!

드림위버 CS6
시각적 웹 개발 도구

뜨거운 주제
Cakephp 튜토리얼
1375
52


Win11 활성화 키 영구
40
19

