jquery实现日历选择功能

最新推荐文章于 2024-05-15 09:35:34 发布

Jessica_J777

最新推荐文章于 2024-05-15 09:35:34 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery 日历

本文链接：https://blog.youkuaiyun.com/qq_37766613/article/details/77838308

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript创建一个动态日历。该日历可根据用户选择显示不同月份和年份，并突出显示当前日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现如下图所示的日历，：

编写日历的基础思想是先获取当前日期，根据当前月份判断本月天数，然后依次获取其他年份月份数据。

下面是我的HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="reset.css">
		<link rel="stylesheet" type="text/css" href="calendar.css">
	</head>
	<body>
		<p class="select-date-box">
			<input type="text" name="date" class="J_selectDate select-date" />
		</p>
		<script type="text/javascript" src="jquery-3.2.1.js"></script>
		<script type="text/javascript" src="calendar.js"></script>
	</body>
</html>

注意自行先引用reset.css，下面是我的css代码calendar.css：

.select-date-box {
	display: inline-block;
	position: relative;
}
.date-box {
	display: none;
	position: absolute;
	top: 33px;
	left: 0;
	width: 406px;
	height: 240px;
	font-size: 16px;
	line-height: 24px !important;
	border: 1px solid #c1c1c1;
	background-color: #fff;
	z-index: 1;
}
li {
	float: left;
	width: 58px;
	text-align: center;
	list-style: none;
}
.select-date {
	width: 230px;
	padding-left: 8px;
	font-size: 84%;
	background: url(calendar.png) no-repeat right center;
	cursor: pointer;
}
.date-box li:nth-child(-n+7) {
	height: 40px;
	color: #fff;
	font-weight: bold;
	line-height: 40px;
	background: #1A84ED;
}
.date-box li:nth-child(-n+7) a:link {
	color: #fff;
}
.date-box li:nth-child(n+8):nth-child(-n+14) {
	color: #1A84ED;
	border-bottom: 1px solid #a1a1a1;
}
.date a {
	color: #1A84ED;
}

/*.sure {
	cursor: pointer;
}*/
.clear {
	cursor: pointer;
}
.date-today {
	background-color: #1A84ED !important; 
	
}
.daye-today  a:link{
	color: #fff !important;
}
.date-today-link {
	color: #fff !important;
}
.date-prev a,.date-next a {
	color: #c1c1c1;
}

注意自行引用jquery-3.2.1.js，下面是我的calendar.js代码：

var now = new Date(); //当前时间
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var weekArray = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var week = weekArray[now.getDay()];
var hour = now.getHours();
var minute = now.getMinutes();

var addSelectBox = ''; 
addSelectBox += '<ul class="date-box"><li class="year-prev"><a href="javascript:;"><</a></li><li class="year"></li><li class="year-next"><a href="javascript:;">></a></li><li class="month-prev"><a href="javascript:;"><</a></li><li class="month"></li><li class="month-next"><a href="javascript:;">></a></li><li class="today"><a href="javascript:;">今天</a></li><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>';
addSelectBox += '<li class="hour-prev"><a href="javascript:;"><</a></li><li class="hour">18时</li><li class="hour-next"><a href="javascript:;">></a></li><li class="minute-prev"><a href="javascript:;"><</a></li><li class="minute">18分</li><li class="minute-next"><a href="javascript:;">></a></li><li class="clear">清空</li></ul>';
$(".J_selectDate").after(addSelectBox);  //页面添加静态日历框  

$(".J_selectDate").on('click',function(e){ //点击input框触发日历框
	changeDate();
	stopPropagation(e);
	$(this).next().show();
	$(".year").html(year+"年");
	$(".month").html(month+"月");
	$(".hour").html(hour+"时");
	$(".minute").html(minute+"分");
});

$(document).bind('click',function(){ //点击页面其他地方日历框隐藏
	$(".date-box").hide();
});

function stopPropagation(e) {     //取消冒泡
	if(e.stopPropagation) {         
		e.stopPropagation();
	} else {
		e.cancelBubble = true;
	}
}

function changeDate() {        //改变日期
	$(".date").remove();
	$(".J_prevDate").remove();
	$(".J_nextDate").remove();
	var otherNow = new Date(year,month-1,1);  //更改后的日期
	var otherNowPrev = new Date(year,month,1);  
	var otherNowNext = new Date(year,month+1,1);  
	var otherMonth = otherNow.getMonth();   
	var otherMonthPrev = otherNowPrev.getMonth();   
	var otherMonthNext = otherNowNext.getMonth();   
	
	if(otherMonth == 1||otherMonth == 3||otherMonth == 5||otherMonth == 7||otherMonth == 8||otherMonth == 10||otherMonth == 12) {	//获取每月的天数
		otherDay = 31;
	} else if(otherMonth == 4||otherMonth == 6||otherMonth == 9||otherMonth == 11) {
		otherDay = 30;
	} else if(otherMonth == 2) {
		if(year%400 == 0 || (year%100!=0 && year%4==0)) { //判断闰年
			otherDay = 29;
		} else {
			otherDay = 28;
		}
	} 
	if(otherMonthPrev == 1||otherMonthPrev == 3||otherMonthPrev == 5||otherMonthPrev == 7||otherMonthPrev == 8||otherMonthPrev == 10||otherMonthPrev == 12) {
		otherDayPrev = 31;
	} else if(otherMonthPrev == 4||otherMonthPrev == 6||otherMonthPrev == 9||otherMonthPrev == 11) {
		otherDayPrev = 30;
	} else if(otherMonthPrev == 2) {
		if(year%400 == 0 || (year%100!=0 && year%4==0)) { //判断闰年
			otherDayPrev = 29;
		} else {
			otherDayPrev = 28;
		}
	} 
	if(otherMonthNext == 1||otherMonthNext == 3||otherMonthNext == 5||otherMonthNext == 7||otherMonthNext == 8||otherMonthNext == 10||otherMonthNext == 12) {
		otherDayNext = 31;
	} else if(otherMonthNext == 4||otherMonthNext == 6||otherMonthNext == 9||otherMonthNext == 11) {
		otherDayNext = 30;
	} else if(otherMonthNext == 2) {
		if(year%400 == 0 || (year%100!=0 && year%4==0)) { //判断闰年
			otherDayNext = 29;
		} else {
			otherDayNext = 28;
		}
	} 
	
	var otherweek = otherNow.getDay();	//通过获取每月1日星期几判断起始点
	var otherweekPrev = otherNowPrev.getDay();
	var otherweekNext = otherNowNext.getDay();
	var showDate ="";
	var j=0,n=0;
	for(var i=0;i<42;i++) {
		if(i<=otherDay+otherweek-1&&i>=otherweek) {
			j++;	
			if(j==date) {
				showDate += "<li class='date date-today'><a href='javascript:;' class='date-today-link'>"+j+"</a></li>"; //当前日期
			} else {
				showDate += "<li class='date'><a href='javascript:;'>"+j+"</a></li>";
			}
		} else if(i<otherweek) {
			p = otherDayPrev+i-otherweek+1;
			showDate += "<li class='J_prevDate date-prev'><a href='javascript:;'>"+p+"</a></li>";
		} else {
			n++;
			showDate += "<li class='J_nextDate date-next'><a href='javascript:;'>"+n+"</a></li>";
		}
	};
	$(".hour-prev").before(showDate);
}

$(".year-prev").on('click',function(e){	//年
	year--;
	$(".year").html(year+"年");
	changeDate();
	stopPropagation(e);
});
$(".year-next").on('click',function(e){
	year++;
	$(".year").html(year+"年");
	changeDate();
	stopPropagation(e);
})

$(".month-prev").on('click',function(e){	//月
	if(month>1) {
		month--;
		$(".month").html(month+"月");
	} else {
		month = 12;
		year--;
		$(".month").html(month+"月");
		$(".year").html(year+"年");
	}
	changeDate();
	stopPropagation(e);
});
$(".month-next").on('click',function(e){
	if(month<12) {
		month++;
		$(".month").html(month+"月");
	} else {
		month = 1;
		year++;
		$(".month").html(month+"月");
		$(".year").html(year+"年");
	}
	changeDate();
	stopPropagation(e);
});

$(".hour-prev").on('click',function(e){	//时
	if(hour>0) {
		hour--;
		$(".hour").html(hour+"时");
	} else {
		hour = 23;
		$(".hour").html(hour+"时");
	}
	stopPropagation(e);
});
$(".hour-next").on('click',function(e){
	if(hour<23) {
		hour++;
		$(".hour").html(hour+"时");
	} else {
		hour = 0;
		$(".hour").html(hour+"时");
	}
	stopPropagation(e);
});

$(".minute-prev").on('click',function(e){	//分
	if(minute>0) {
		minute--;
		$(".minute").html(minute+"分");
	} else {
		minute = 59;
		$(".minute").html(minute+"分");
	}
	stopPropagation(e);
});
$(".minute-next").on('click',function(e){
	if(minute<59) {
		minute++;
		$(".minute").html(minute+"分");
	} else {
		minute = 0;
		$(".minute").html(minute+"分");
	}
	stopPropagation(e);
})

$(".today").on('click',function(){	//今天
	now = new Date();
	year = now.getFullYear();
	month = now.getMonth()+1;
	date = now.getDate();
	hour = now.getHours();
	minute = now.getMinutes();
	$(".year").html(year+"年");
	$(".month").html((month+1)+"月");
	$(".hour").html(hour+"时");
	$(".minute").html(minute+"分");
	changeDate();
	normalDate();
	$(this).parent().prev().val(today);
})

$(".date-box").on('click','.date',function(){	//日
	date = $(this).text();
	normalDate();
	$(this).parent().prev().val(today);
})
$(".date-box").on('mouseover','.date',function(){
	$(this).children().css({"color":"#fff","text-decoration":"none"});
	$(this).css("background-color","#1A84ED");
})
$(".date-box").on('mouseout','.date',function(){
	$(this).children().css("color","#1A84ED");
	$(this).css("background-color","#fff");
})

$(".date-box").on('click','.J_prevDate',function(e){	//灰色日期
	date = $(this).text();
	if(month == 1) {
		year--;
		month=12;
		normalDate();
		$(this).parent().prev().val(today);
	} else {
		month--;
		normalDate();
		$(this).parent().prev().val(today);
	}
})
$(".date-box").on('click','.J_nextDate',function(){
	date = $(this).text();
	if(month == 12) {
		year++;
		month=1;
		normalDate();
		$(this).parent().prev().val(today);
	} else {
		month++;
		normalDate();
		$(this).parent().prev().val(today);
	}
})
function normalDate() {	//规格化日期
	if(month<10)	month="0"+month; 
	if(date<10)		date="0"+date; 
	if(hour<10)		hour="0"+hour; 
	if(minute<10)	minute="0"+minute; 
//	today = year+"年"+month+"月"+date+"日"+hour+"时"+minute+"分";
	today = year+"-"+month+"-"+date+" "+hour+":"+minute+":00";
	month = Number(month);
	date = Number(date);
	hour = Number(hour);
	minute = Number(minute);
}

 
// $(".sure").on('click',function(){	//确定 
// 	$(".date-box").hide();
// })
	

$(".clear").on('click',function(){	//清空
	$(this).parent().prev().val("");
})

这样一个简单大方的日历就做好了！