- <html>
- <head>
- <title>calendar</title>
- <script type="text/javascript" src1="jquery-1.9.1.min.js"></script>
- <style type="text/css">
- table {
- width: 700px;
- height: 300px;
- border-collapse: collapse;
- }
- table, td, th {
- border-width: 1px;
- border-style: solid;
- border-color: #a9c6c9;
- text-align: center;
- }
- td.pre{
- background-color: gainsboro;
- }
- td.current{
- background-color: #c3dde0;
- }
- td.next{
- background-color: lightgreen;
- }
- td.today{
- background-color: #87ceeb;
- }
- </style>
- </head>
- <body onload="setCalendar()">
- <div>
- <div>
- <button onclick="preButton()"><span> < </span></button>
- <span id="displayDate"></span>
- <button onclick="resume()"><span> 今天 </span></button>
- <button onclick="nextButton()"><span> > </span></button>
- </div>
- <div id="calendarContainer">日历显示失败</div>
- </div>
- <script type="text/javascript">
- //临时记录日期的变量
- var tempDate;
- /*获取当前日期*/
- function getRightNow() {
- return new Date();
- }
- /*返回当前日期是周几,如果是周日,定义为7*/
- function getDay(date){
- var day = date.getDay();
- if(0 == day){
- day = 7;
- }
- return day;
- }
- /*获取某月份的天数,由于JavaSript的Date对象自动判断是否闰年,所以无需加入人工判断的代码*/
- function getDays(date) {
- //月份(1 ~ 12),提取出月,日,计算出days值后,再改回去
- var month = date.getMonth() + 1;
- var currentDate = date.getDate();
- date.setMonth(month, 0);
- var days = date.getDate();
- date.setMonth(month - 1, currentDate);
- return days;
- }
- /*当前月份的第一天是周几*/
- function getFirstDayOfMonth(date){
- var currentDate = date.getDate();
- //修改日期,求出1号周几
- date.setDate(1);
- var firstDayOfMonth = getDay(date);
- //日期复位
- date.setDate(currentDate);
- //返回
- return firstDayOfMonth;
- }
- /*月份的最后一天是周几*/
- function getLastDayOfMonth(date){
- var currentDate = date.getDate();
- var days = getDays(date);
- //将日期设置为最后一天,以便计算某个月份的最后一天是周几
- date.setDate(days);
- //求出最后一天周几,调用自定义方法getDay(),传入日期参数
- var lastDayOfMonth = getDay(date);
- //再将日期复位为传入时的日期
- date.setDate(currentDate);
- return lastDayOfMonth;
- }
- //获取下一个月份的前一行,或者前两行,补充到当前月份结尾
- function getHeadOfNextMonth(date) {
- var days = getDays(date);
- var firstDayOfMonth = getFirstDayOfMonth(date);
- var verbose = firstDayOfMonth - 1;
- var row = "";
- var line = 0;
- for (var i = 1; i <= days; i++) {
- if ((i + verbose) % 7 == 0) {
- line++;
- }
- }
- //找出下一个月份
- var year = date.getFullYear();
- var month = date.getMonth();
- if (month == 11) {
- year += 1;
- month = 0;
- }
- else {
- month += 1;
- }
- var nextMonth = new Date(year, month);
- var firstDayOfNextMonth = getFirstDayOfMonth(nextMonth);
- verbose = firstDayOfNextMonth - 1;
- //返回一行
- if (line == 5) {
- for (var i = 1; i <= 7 - verbose; i++) {
- row += "<td class='next'>"+i+"</td>";
- }
- row += "</tr>";
- }
- //返回两行
- if (line == 4) {
- var i = 1;
- for (i = 1; i <= 7 - verbose; i++) {
- row += "<td class='next'>" + i + "</td>";
- }
- row += "</tr>";
- var secRow="";
- for ( ; i <= 14 - verbose; i++) {
- secRow += "<td class='next'>" + i + "</td>";
- if ((i + verbose) % 7 == 0) {
- row += "<tr>" + secRow + "</tr>";
- }
- }
- }
- return row;
- }
- //在当月日历前的空单元格中填入上月份结尾一行的日历
- function getEndOfPreMonth(date){
- var year = date.getFullYear();
- var month = date.getMonth();
- if (month == 0) {
- year -= 1;
- month = 11;
- }
- else {
- month -= 1;
- }
- var preMonth = new Date(year, month);
- //8月份共31天
- var days = getDays(preMonth);
- //1号星期几
- var firstDayOfMonth = getFirstDayOfMonth(preMonth);
- //verbose 变量决定表格当中日期的第一行前端有几个空单元格
- var verbose = firstDayOfMonth - 1;
- var row = "";
- for (var i = 1; i <= days; i++) {
- row += "<td class='pre'>" + i + "</td>";
- if ((i + verbose) % 7 == 0) {
- row = "";
- }
- }
- return row;
- }
- function show(customDate) {
- //今天几号
- var date = customDate.getDate();
- //本月一共多少天
- var days = getDays(customDate);
- //1号星期几
- var firstDayOfMonth = getFirstDayOfMonth(customDate);
- /*
- 冗余,变量决定表格当中日期的第一行前端有几个空单元格
- 如果一号是周六,那么前面就会有 5 个单元格来显示上月份的最末一行的日历
- */
- var verbose = firstDayOfMonth - 1;
- var dateString = "";
- //第一列是周一,而不是周日
- dateString += "<table>" + "<th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th>";
- var row = "";
- row = getEndOfPreMonth(customDate);
- for (var i = 1; i <= days; i++) {
- if(i == date){
- row += "<td class='today'>" + i + "</td>";
- }
- else{
- row += "<td class='current'>" + i + "</td>";
- }
- //到达周末后,换一行显示
- if ((i + verbose) % 7 == 0) {
- dateString += "<tr>" + row + "</tr>";
- //清空,以接收下一行
- row = "";
- }
- }
- //获取下月份的前几行补充到当前月份的表格中
- var returnRow = getHeadOfNextMonth(customDate);
- dateString += "<tr>" + row + returnRow;
- dateString += "</table>";
- var calendarContainer = document.getElementById("calendarContainer");
- calendarContainer.innerHTML = dateString;
- }
- //页面一加载时就执行的函数
- function setCalendar() {
- show(getRightNow());
- fillDate();
- changeWeekendStyle();
- }
- function getTempDate(){
- if(tempDate == undefined) {
- tempDate = getRightNow();
- }
- return tempDate;
- }
- /*获得前一个月份*/
- function getPreMonth() {
- tempDate = getTempDate();
- var year = tempDate.getFullYear();
- var month = tempDate.getMonth();
- var date = tempDate.getDate();
- //改变年份和月份
- if (month == 0) {
- year -= 1;
- tempDate.setFullYear(year, 11, 1);
- }
- else {
- month -= 1;
- tempDate.setMonth(month, 1);
- }
- var preDays = getDays(tempDate);
- if(date >= preDays){
- date = preDays;
- }
- tempDate.setDate(date);
- return tempDate;
- }
- //点击向前按钮时执行的动作
- function preButton(){
- var preMonth = getPreMonth();
- show(preMonth);
- fillDate();
- changeWeekendStyle();
- }
- //点击今天按钮,将日期时间复位
- function resume(){
- tempDate = getRightNow();
- show(tempDate);
- fillDate();
- changeWeekendStyle();
- }
- /*获得下一个月份*/
- function getNextMonth() {
- tempDate = getTempDate();
- var year = tempDate.getFullYear();
- var month = tempDate.getMonth();
- var date = tempDate.getDate();
- //改变年份和月份
- if (month == 11) {
- year += 1;
- tempDate.setFullYear(year, 0, 1);
- }
- else {
- month += 1;
- tempDate.setMonth(month, 1);
- }
- var nextDays = getDays(tempDate);
- //如果
- if(date >= nextDays){
- date = nextDays;
- }
- tempDate.setDate(date);
- return tempDate;
- }
- /*点击下月份按钮时执行的动作*/
- function nextButton() {
- var nextMonth = getNextMonth();
- show(nextMonth);
- fillDate();
- changeWeekendStyle();
- }
- function changeWeekendStyle(){
- //表格7行7列,将后两列文字颜色修改为其他颜色,以更明显的方式体现出周末
- //修改第一行 th 的后两列
- $("th:gt(4)").css("color", "red");
- //修改剩余行 td 的后两列
- for (var i = 0; i < 7; i++) {
- $("tr:eq(" + i + ")>td:gt(4)").css("color", "red");
- }
- }
- //将日期以2015年8月17日的形式显示出来
- function fillDate(){
- var display = document.getElementById("displayDate");
- display.innerHTML = getTempDate().toLocaleDateString();
- }
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/2408201513529.html
来源: http://www.codesnippet.cn/detail/2408201513529.html