经验分享程序开发文档资料数据资源其它资源

jQuery控件简易日历表格代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery控件简易日历表格代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery控件简易日历表格代码

HTML代码(index.html):

<!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>jQuery控件简易日历表格代码</title>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/kalendar.js"></script>
<link type="text/css" rel="stylesheet" href="css/kalendar.css" />
</head>

<body>
<div id='wrap'>
</div>
</body>
</html>

JS代码(kalendar.js):

$(function(){
	/************* 方法 **************/
//判断是否是闰年,计算每个月的天数function leapYear(year){
	var isLeap = year%100==0 ? (year%400==0 ? 1:0):(year%4==0 ? 1:0);
	return new Array(31,28+isLeap,31,30,31,30,31,31,30,31,30,31);
}
//获得某月第一天是周几function firstDay(day){
	return day.getDay();
}
//获得当天的相关日期变量function dateNoneParam(){
	var day = new Date();
	var today = new Array();
	today['year'] = day.getFullYear();
	today['month'] = day.getMonth();
	today['date'] = day.getDate();
	today['hour'] = day.getHours();
	today['minute'] = day.getMinutes();
	today['second'] = day.getSeconds();
	today['week'] = day.getDay();
	today['firstDay'] = firstDay(new Date(today['year'],today['month'],1));
	return today;
}
//获得所选日期的相关变量function dateWithParam(year,month){
	var day = new Date(year,month);
	var date = new Array();
	date['year'] = day.getFullYear();
	date['month'] = day.getMonth();
	date['firstDay'] = firstDay(new Date(date['year'],date['month'],1));
	return date;
}
//生成日历代码 的方法//参数依次为 年 月 日 当月第一天(是星期几)function kalendarCode(codeYear,codeMonth,codeDay,codeFirst){
	kalendar_html = "<table id='kalendar'>\n<tr id='select'>\n<td colspan=7>\n<div id='year'>\n<ul>\n<li><input type='button' id='yearPrev' value='<<' /></li>\n<li class='selectChange'>\n<select name='year'>";
	//年 选择for(var i=1970;
	i<=codeYear+yearfloor;
	i++){
	if(i == codeYear){
	kalendar_html += "<option value='"+i+"' selected='true'>"+i+"</option>";
}
else{
	kalendar_html += "<option value='"+i+"'>"+i+"</option>";
}
}
kalendar_html += "</select>\n</li>\n<li><input type='button' id='yearNext' value='>>' /></li>\n</ul>\n</div>\n<div id='month'>\n<ul>\n<li><input type='button' id='monthPrev' value='<' /></li>\n<li class='selectChange'>\n<select name='year'>";
	//月 选择for(var j=0;
	j<=11;
	j++){
	if(j == codeMonth){
	kalendar_html += "<option value='"+j+"' selected='true'>"+month[j]+"</option>";
}
else{
	kalendar_html += "<option value='"+j+"'>"+month[j]+"</option>";
}
}
kalendar_html += "</select>\n</li>\n<li><input type='button' id='monthNext' value='>' /></li>\n</ul>\n</div>\n<div id='time'>\n</div>\n</td>\n</tr>\n\n<tr id='week'>\n<td>\n<ul>\n<li class='weekend'>星期日</li>\n<li>星期一</li>\n<li>星期二</li>\n<li>星期三</li>\n<li>星期四</li>\n<li>星期五</li>\n<li class='weekend'>星期六</li>\n</ul>\n</td>\n</tr>\n\n<tr id='day'>\n<td colspan=7>\n";
	//日 列表for(var m=0;
	m<6;
	m++){
	//日期共 4-6 行if(m >= Math.ceil((codeFirst+monthDays[codeMonth])/7)){
	//第五、六行是否隐藏kalendar_html += "<ul class='dayList hide dayListHide"+m+"'>\n";
}
else{
	kalendar_html += "<ul class='dayList dayListHide"+m+"'>\n";
}
for(var n=0;
	n<7;
	n++){
	//列if((7*m+n) < codeFirst || (7*m+n) >= (codeFirst+monthDays[codeMonth])){
	//某月日历中不存在的日期kalendar_html += "<li></li>";
}
else{
	if((7*m+n+1-codeFirst == codeDay)&&(((7*m+n)%7 == 0) || ((7*m+n)%7 == 6))){
	//当天是周末kalendar_html += "<li class='todayWeekend'>"+(7*m+n+1-codeFirst)+"</li>";
}
else if(((7*m+n)%7 == 0) || ((7*m+n)%7 == 6)){
	//仅是周末kalendar_html += "<li class='weekend'>"+(7*m+n+1-codeFirst)+"</li>";
}
else if(7*m+n+1-codeFirst == codeDay){
	//仅是当天kalendar_html += "<li class='today'>"+(7*m+n+1-codeFirst)+"</li>";
}
else{
	//其他日期kalendar_html += "<li>"+(7*m+n+1-codeFirst)+"</li>";
}
}
}
kalendar_html += "</ul>\n";
}
kalendar_html += "</td>\n</tr>\n</table>";
	return kalendar_html;
}
//年-月select框改变数值 的方法//参数依次为 1、操作对象(年下拉菜单 或 月下拉菜单) 2、被选中的下拉菜单值function y_mChange(obj,stopId){
	obj.val(stopId);
}
//修改日历列表 的方法//参数依次为 操作对象(每一天) 月份 修改后的第一天是星期几 修改后的总天数 当天的具体日期function dateChange(dateObj,dateMonth,dateFirstDay,dateTotalDays,dateCurrentDay){
	//判断新日历有几行,需要显示或隐藏var newLine = Math.ceil((dateFirstDay+monthDays[dateMonth])/7);
	//新行数if(newLine > dateLine){
	//增加行for(var i=dateLine;
	i<newLine;
	i++){
	$('.dayListHide'+i).show();
}
}
else if(newLine < dateLine){
	//减少行for(var i=dateLine-1;
	i>=newLine;
	i--){
	$('.dayListHide'+i).hide();
}
}
//重置日期排序dateLine = newLine;
	/*如果改变 月 后，选中月的总天数小于当前日期，*如当前3.31，选中2月，可2月最多29天，则将当前日期改为选中月的最后一天，即2.39*/
if(dateTotalDays < dateCurrentDay){
	dateCurrentDay = dateTotalDays;
}
for(var i=0;
	i<7*newLine;
	i++){
	if(i < dateFirstDay || i> (dateTotalDays+dateFirstDay-1)){
	//日历中 当月不存在的日期dateObj.eq(i).text('').removeClass();
}
else{
	if((i+1-dateFirstDay == dateCurrentDay) && (i%7 == 0 || i%7 == 6)){
	dateObj.eq(i).removeClass().addClass('todayWeekend');
}
else if(i%7 == 0 || i%7 == 6){
	//仅周末dateObj.eq(i).removeClass().addClass('weekend');
}
else if(i+1-dateFirstDay == dateCurrentDay){
	//仅当天dateObj.eq(i).removeClass().addClass('today');
}
else{
	//其他日期dateObj.eq(i).removeClass();
}
dateObj.eq(i).text(i+1-dateFirstDay);
}
}
}
/************* 缓存节点和变量 **************/
var rili_location = $('#wrap');
	//日历代码的位置var kalendar_html = '';
	//记录日历自身代码 的变量var yearfloor = 10;
	//选择年份从1970到当前时间的后10年var someDay = dateNoneParam();
	//修改后的某一天,默认是当天var yearChange = someDay['year'];
	//改变后的年份，默认当年var monthChange = someDay['month'];
	//改变后的年份，默认当月/************* 将日历代码放入相应位置，初始时显示此处内容 **************/
//获取时间，确定日历显示内容var today = dateNoneParam();
	//当天/*月-日 设置*/
var month = new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');
	var monthDays = leapYear(today['year']);
	//返回数组，记录每月有多少天var weekDay = new Array('日','一','二','三','四','五','六');
	// alert('年:'+someDay['year']+'\n月:'+someDay['month']+'\n日:'+someDay['date']+'\n星期:'+someDay['week']+'\n本月第一天星期:'+someDay['firstDay']);
	return false;
	kalendar_html = kalendarCode(today['year'],today['month'],today['date'],today['firstDay']);
	rili_location.html(kalendar_html);
	/************* js写的日历代码中出现的节点 **************/
var yearPrev = $('#yearPrev');
	//上一年按钮var yearNext = $('#yearNext');
	//下一年按钮var monthPrev = $('#monthPrev');
	//上一月按钮var monthNext = $('#monthNext');
	//下一月按钮var selectYear = $('#year .selectChange select');
	//选择年份列表var listYear = $('#year .selectChange select option');
	//所有可选年份var selectMonth = $('#month .selectChange select');
	//选择月份列表var listMonth = $('#month .selectChange select option');
	//所有可选月份var dateLine = Math.ceil((monthDays[today['month']]+today['firstDay'])/7);
	;
	//当前日历中有几行日期，默认是 当年当月var dateDay = $('#kalendar tr#day td ul.dayList li');
	//日历中的每一天/***************************/
//年 按钮事件yearPrev.bind('click',function(){
	yearChange --;
	if(yearChange < 1970){
	yearChange = 1970;
	alert('太前也没意义了...');
	return false;
}
//修改年份y_mChange(selectYear,yearChange);
	//重新获得 每月天数monthDays = leapYear(yearChange);
	//alert(monthDays);
	//新 年-月 下的对象信息someDay = dateWithParam(yearChange,monthChange);
	//修改 日期 列表dateChange(dateDay,someDay['month'],someDay['firstDay'],monthDays[someDay['month']],today['date']);
}
);
	yearNext.bind('click',function(){
	yearChange ++;
	if(yearChange >= today['year']+yearfloor){
	yearChange = today['year']+yearfloor;
	alert('太后也没意义了...');
	return false;
}
//修改年份y_mChange(selectYear,yearChange);
	//重新获得 每月天数monthDays = leapYear(yearChange);
	//alert(monthDays);
	//新 年-月 下的对象信息someDay = dateWithParam(yearChange,monthChange);
	//修改 日期 列表dateChange(dateDay,someDay['month'],someDay['firstDay'],monthDays[someDay['month']],today['date']);
}
);
	// 月 按钮事件monthPrev.bind('click',function(){
	monthChange --;
	if(monthChange >= 0){
	//仍在本年内//修改月份y_mChange(selectMonth,monthChange);
}
else{
	monthChange = 11;
	//前一年的最后一个月yearChange --;
	if(yearChange < 1970){
	yearChange = 1970;
	alert('太久远也没意义了...');
	return false;
}
//修改月份y_mChange(selectMonth,monthChange);
	//修改年份y_mChange(selectYear,yearChange);
	//重新获得 每月天数monthDays = leapYear(yearChange);
}
//新 年-月 下的对象信息someDay = dateWithParam(yearChange,monthChange);
	//修改 日期 列表dateChange(dateDay,someDay['month'],someDay['firstDay'],monthDays[someDay['month']],today['date']);
}
);
	monthNext.bind('click',function(){
	monthChange ++;
	if(monthChange <= 11){
	//仍在本年内//修改月份y_mChange(selectMonth,monthChange);
}
else{
	monthChange = 0;
	//下一年的第一个月yearChange ++;
	if(yearChange >= someDay['year']+yearfloor){
	yearChange = someDay['year']+yearfloor;
	alert('太久远也没意义了...');
	return false;
}
//修改月份y_mChange(selectMonth,monthChange);
	//修改年份y_mChange(selectYear,yearChange);
	//重新获得 每月天数monthDays = leapYear(yearChange);
}
//新 年-月 下的对象信息someDay = dateWithParam(yearChange,monthChange);
	//修改 日期 列表dateChange(dateDay,someDay['month'],someDay['firstDay'],monthDays[someDay['month']],today['date']);
}
);
	// 年 选择事件selectYear.bind('change',function(){
	//获得年份yearChange = $(this).val();
	//修改年份y_mChange(selectYear,yearChange);
	//重新获得 每月天数monthDays = leapYear(yearChange);
	//新 年-月 下的对象信息someDay = dateWithParam(yearChange,monthChange);
	//修改 日期 列表dateChange(dateDay,someDay['month'],someDay['firstDay'],monthDays[someDay['month']],today['date']);
}
);
	// 月 选择事件selectMonth.bind('change',function(){
	//获得 月monthChange = $(this).val();
	//修改月份y_mChange(selectMonth,monthChange);
	//新 年-月 下的对象信息someDay = dateWithParam(yearChange,monthChange);
	//修改 日期 列表dateChange(dateDay,someDay['month'],someDay['firstDay'],monthDays[someDay['month']],today['date']);
}
);
	/*日 鼠标事件*/
dateDay.hover(function(){
	$(this).addClass('mouseFloat');
}
,function(){
	$(this).removeClass('mouseFloat');
}
);
}
);

CSS代码(kalendar.css):

@charset "utf-8";*{padding:0;margin:0;}
li{list-style:none;}
#wrap{width:570px;margin:20px auto;}
#kalendar{width:574px;border:solid 1px #ccc;margin:0 auto;}
/* 选择年月 的行 */
#kalendar tr#select{height:30px;background:#eee;}
#kalendar tr#select td{clear:both;}
#kalendar tr#select td div{float:left;width:160px;height:30px;line-height:30px;}
#kalendar tr#select #year,#kalendar tr#select #month{width:135px;padding-left:20px;}
#select #year ul,#select #month ul{clear:both;}
#select #year ul li,#select #month ul li{float:left;width:30px;}
#select #year ul li input,#select #month ul li input{width:30px;text-align:30px;cursor:pointer;}
#select #year ul li.selectChange,#select #month ul li.selectChange{width:70px;height:10px;}
#select #year ul li.selectChange select,#select #month ul li.selectChange select{width:70px;padding-left:2px;cursor:pointer;}
#select #year ul li.selectChange select option,#select #month ul li.selectChange select option{padding-left:5px;}
/* 星期表头 的行 */
#kalendar tr#week{height:50px;}
#kalendar tr#week td ul{width:574px;clear:both;}
#kalendar tr#week td ul li{float:left;width:80px;height:50px;line-height:50px;text-align:center;margin:0 1px;background:#9999CC;}
/* 某月具体日期 的每一行 */
#kalendar tr#day ul.dayList{width:574px;height:50px;clear:both;margin:2px auto;}
#kalendar tr#day ul.dayList li{float:left;width:80px;height:50px;line-height:50px;text-align:center;margin:0 1px;background:#eee;cursor:pointer;}
/* 日期占用行数(4-6行)，将不需要显示的行隐藏 */
#kalendar tr#day ul.hide{display:none;}
/* 周末 的特殊样式 */
#week .weekend,#day .weekend{color:#EA0000;}
/* 下面几个样式注意顺序，选择器不能简写，否则日历中 今天 的样式会被鼠标滑过的样式替换 */
/* 鼠标经过某个日期 的特殊样式 */
#kalendar tr#day td ul.dayList li.mouseFloat{background:#FFDCB9;}
/* 当天是周末 的特殊样式 */
#kalendar tr#day td ul.dayList li.todayWeekend{color:#EA0000;background:#abcdef;font-weight:700;}
/* 当天 的特殊样式 */
#kalendar tr#day td ul.dayList li.today{background:#abcdef;font-weight:700;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
35.95 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
35.95 KB
立即下载
张凡莉
了解
打赏作者 鼓励作者
jquery特效4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章