首页 > 代码库 > 日历控件源码
日历控件源码
前两天需要个简单的日历控件，网上搜了一下居然还有人卖，估计是提供其他维护服务吧，反正我是用不到的，自己手写了个凑合用，自己写的兼容性没测过，如果有什么问题大家给点改进意见。
先上图
源码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//星期列表
var WEEK = ["日","一","二","三","四","五","六"];
//平年每月天数
var DAYS_IN_NORMAL = [31,28,31,30,31,30,31,31,30,31,30,31];
//闰年每月天数
var DAYS_IN_SPECIAL = [31,29,31,30,31,30,31,31,30,31,30,31];
//选择年份每月天数
var DAYS_IN_SELECTED;
//存放日期的输入框
var CONTAINER;
//日期分隔符
var SPLIT;
//日历界面
var DATE_PANEL;
//选定的日期，默认为当天
var DEFAULT_DATE = new Date();
/**
* 日期控件入口，主要控制div层显示和隐藏
* @param inputId 日期输入框ID
* @param split 日期分隔符
*/
function selectDate(inputId,split)
{
SPLIT = split;
CONTAINER = document.getElementById(inputId);
DATE_PANEL = document.getElementById("div_"+inputId);
//获取日期输入框位置(x,y)
var x = CONTAINER.clientLeft;
var y = CONTAINER.clientTop + CONTAINER.clientHeight;
var strDate = CONTAINER.value.trim();
//设定日历的日期
if(strDate != "")
{
var ymd = changeStr2ArrDate(strDate);
if(ymd.length==3)
{
DEFAULT_DATE.setFullYear(parseInt(ymd[0]));
DEFAULT_DATE.setMonth(parseInt(ymd[1])-1);
DEFAULT_DATE.setDate(parseInt(ymd[2]));
}
else
{
alert("输入日期格式不正确");
return "";
}
}
if(DATE_PANEL.style.display=="none")
{
DATE_PANEL.style.border = "1px solid black";
DATE_PANEL.style.backgroundColor = "aliceblue";
DATE_PANEL.style.width = "175px";
DATE_PANEL.style.height = "160px";
DATE_PANEL.style.position = "fixed";
DATE_PANEL.style.zIndex = "99";
DATE_PANEL.style.marginLeft = x;
DATE_PANEL.style.marginTop = y;
DATE_PANEL.innerHTML = datePanel();
DATE_PANEL.style.display = "block";
}
else
{
DATE_PANEL.style.display = "none";
}
}
/**
* 将字符串日期转数组存储
*
* @param strDate
* @returns {array} 三位长度数组，分别对应年月日
*/
function changeStr2ArrDate(strDate)
{
var arr;
if(SPLIT == "-" && strDate.substr(0,1) == "-")
{
arr = strDate.substr(1).split(SPLIT);
if(arr.length>1)
{
arr[0] = "-" + arr[0];
}
}
else
{
arr = strDate.split(SPLIT);
}
if(arr.length==3 && parseInt(arr[1])>0 && parseInt(arr[1]) < 13 && parseInt(arr[2])>0 && parseInt(arr[2]) <= parseInt(DAYS_IN_SELECTED[parseInt(arr[1])]))
{
return arr;
}
else
{
return new Array();
}
}
/**
* 根据输入字符串型日期，获取当月日历
*
* @param value
* @returns {string}
*/
function datePanel()
{
var html = "<table width='100%' id='date_table'>";
html += menuTable();
html += addWeekTitle();
html += mainTable();
html += "</table>";
return html;
}
/**
* 获取日历
*
* @returns {string}
*/
function mainTable()
{
var year = DEFAULT_DATE.getFullYear();
var month = DEFAULT_DATE.getMonth();
var day = DEFAULT_DATE.getDate();
var week = DEFAULT_DATE.getDay();
getDaysInMonth(year);
var currentMonthMap = getMonthMap(year,month);
return transArr2Table(currentMonthMap);
}
/**
* 设定给定年份的每月天数
*
* @param year
*/
function getDaysInMonth(year)
{
if(year%400 == 0 || (year%4 ==0 && year%100!=0))
{
DAYS_IN_SELECTED = DAYS_IN_SPECIAL;
}
else
{
DAYS_IN_SELECTED = DAYS_IN_NORMAL;
}
}
/**
* 当月日历数组，包括空白部分
*
* @param year
* @param month
* @returns {Array}
*/
function getMonthMap(year,month)
{
var first_day_in_week = new Date(year,month,1).getDay();
var last_day_in_week = new Date(year,month,DAYS_IN_SELECTED[month]).getDay();
var daysInThisMonth = DAYS_IN_SELECTED[month];
var mapDays = first_day_in_week + DAYS_IN_SELECTED[month] + 6 - last_day_in_week;
var map = new Array(mapDays);
var count = 1;
for(var i=0;i<mapDays;i++)
{
if(i<first_day_in_week)
{
map[i] = " ";
}
else if(i<=daysInThisMonth+first_day_in_week-1)
{
map[i] = ""+count;
count++;
}
else
{
map[i] = " ";
}
}
return map;
}
/**
* 将数组转换成html图标
*
* @param currentMonthMap
* @returns {string}
*/
function transArr2Table(currentMonthMap)
{
var html = "";
var rows = currentMonthMap.length/7;
for(var i=0;i<rows;i++)
{
html += "<tr>";
for(var n=0;n<7;n++)
{
var num = n+i*7;
if(currentMonthMap[num]==" ")
{
html += "<td id='td_"+num+"'>"+currentMonthMap[num]+"</td>";
}
else if(currentMonthMap[num]==DEFAULT_DATE.getDate())
{
//点击时日期，高亮显示
html += "<td id='td_"+num+"' onclick=\"chooseDate(this);\" ";
html += "style='font-size: 13px;background-color: palegreen;text-align:center;'>"
html += currentMonthMap[num];
html += "</td>";
}
else
{
//其他日期，鼠标经过事件，点击事件
html += "<td id='td_"+num+"' onm ouseover=\"changeColor('td_"+num+"')\" ";
html += "onmouseout=\"resetColor('td_"+num+"')\" ";
html += "onclick=\"chooseDate(this);\" ";
html += "style='font-size: 13px;text-align:center;'>";
html += currentMonthMap[num];
html += "</td>";
}
}
html += "</tr>";
}
return html;
}
/**
* 日期选择菜单
*
* @returns {string}
*/
function menuTable()
{
var html = "<tr>";
html += "<td colspan='7'>";
html += "<input style='width: 20px;font-size: 10px;' type='button'value=http://www.mamicode.com/'<<' onclick='change(-1,0);'/>";>
日历控件源码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。