html5自带日历控件实现不选中当前日期和之前的日期

最新推荐文章于 2022-12-12 15:58:49 发布

初晨未凉

最新推荐文章于 2022-12-12 15:58:49 发布

阅读量550

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45638909/article/details/108330632

版权

笔记专栏收录该内容

59 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>日历控件</title>
		<link rel="stylesheet" href="css/bootstrap-4.0.0.css" />
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-4.0.0.js"></script>
	</head>
	<body>
		<div>
			<input type="date" id="datenow">
		</div>
	</body>
	<script>
		$(function() {
			//得到当前时间
			var date_now = new Date();
			//得到当前年份
			var year = date_now.getFullYear();
			//得到当前月份
			var month = date_now.getMonth();
			//当前的日子
			var date = date_now.getDate();
			//判断闰年平年
			//闰年能被4整除并且不能被100整除为闰年或者能被400整除为闰年
			if(year%100!=0&&year%4==0||year%400==0){
				switch(date){
					case 29:
					var month = month + 1 < 10 ? "0" + (month + 1) : (month + 1);
					var date = date - 28 < 10 ? "0" + (date-28) : (date-28);
					case 30:
					var month = month + 2 < 10 ? "0" + (month + 2) : (month + 2);
     				var date = date - 29 < 10 ? "0" +(date - 29):(date - 29) ;
					case 31:
					var month = month + 2 < 10 ? "0" + (month + 2) : (month + 2);
      				var date = date - 30 < 10 ? "0" + (date - 30) : date - 30;
				}
			}else{
				switch(date){
					case 28:
					var month = month + 1 < 10 ? "0" + (month + 1) : (month + 1);
					var date = date - 27 < 10 ? "0" + (date-27) : (date-27);
					case 30:
					var month = month + 2 < 10 ? "0" + (month + 2) : (month + 2);
					var date = date - 29 < 10 ? "0" + (date-29) : (date-29);
					case 31:
					var month = month + 2 < 10 ? "0" + (month + 2) : (month + 2);
					var date = date - 30 < 10 ? "0" + (date-30) : (date-30);
				}
			}
			//设置input标签属性
			$("#datenow").attr("min", year + "-" + month + "-" + date);
			$("#datenow").attr('value', year + "-" + month + "-" + date);
		})
	</script>

</html>

效果：
在这里插入图片描述

初晨未凉

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html5自带日历控件实现不选中当前日期和之前的日期

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>日历控件</title> <link rel="stylesheet" href="css/bootstrap-4.0.0.css" /> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></scri
复制链接

扫一扫