原生js实现日期选择器插件简单风格日期选择插件_原生js滑动日期选择控件-CSDN博客

本文链接：https://blog.csdn.net/qq_45830796/article/details/124817052

原生js实现日期选择插件 xs-DatePicker

效果图

**
效果图
**

简介

通过原生HTML/CSS/JavaScript完成一个日期选择器。

代码如下：

<!-- 
  时间：2022-5-17
 作者：小宋同学的云
 标题：原生js实现日期选择器插件 简单风格日期选择插件
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width = device-width,user-scalable = no, inital-scale = 1，maximum-scale = 1 minium-scal = 1">
		<title>日期选择器</title>
		<style>
			.xs-date {
				color: #606266;
				border: 1px solid #e4e7ed;
				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
				background: #fff;
				border-radius: 4px;
				line-height: 30px;
				margin: 100px auto;
				width: 300px;
				min-height: 300px;
				padding: 10px;
			}

			.xs-date-title {
				display: flex;
				justify-content: center;
				text-align: center;
				cursor: pointer;
				color: #606266;
				font-size: 16px;
			}

			.date-prev {
				width: 15%;
				font-family: cursive;
			}

			.date-year-prev {
				width: 15%;
				font-family: cursive;
			}

			.date-time {
				width: 40%;
			}

			.date-next {
				width: 15%;
				font-family: cursive;
			}

			.date-year-next {
				width: 15%;
				font-family: cursive;
			}

			.xs-date-week {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 15px;
				padding-bottom: 5px;
				border-bottom: 1px solid #e4e7ed;
			}

			.xs-date-week div {
				list-style: none;
				width: calc(100%/7);
				text-align: center;
				color: #606266;
				font-size: 14px;
			}

			.xs-date-day {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				margin-top: 15px;
			}

			.xs-date-day div {
				width: calc(100%/7);
				height: 40px;
				text-align: center;
				color: #606266;
				font-size: 14px;
				cursor: pointer;
			}

			.date-prev:hover,
			.date-next:hover,
			.date-time:hover,
			.xs-date-day div:hover {
				color: #409eff;
			}

			.active {
				color: #409eff !important;
			}

			.Disable {
				color: #c0c4cc !important;
			}
		</style>
	</head>
	<body>
		<div class="xs-date">
			<div class="xs-date-title">
				<div class="date-year-prev">
					<< </div>
						<div class="date-prev">
							< </div>
								<div class="date-time">2022年 5月</div>
								<div class="date-next"> > </div>
								<div class="date-year-next"> >> </div>
						</div>
						<div class="xs-date-week">
							<div>日</div>
							<div>一</div>
							<div>二</div>
							<div>三</div>
							<div>四</div>
							<div>五</div>
							<div>六</div>
						</div>
						<div class="xs-date-day">
						</div>
				</div>

				<script>
					let date_time = document.querySelector(".date-time");
					let prev = document.querySelector(".date-prev");
					let next = document.querySelector(".date-next");
					let prev_year = document.querySelector(".date-year-prev");
					let next_year = document.querySelector(".date-year-next");
					let date_day = document.querySelector(".xs-date-day");

					// 初始
					let date = new Date() //当前时间


					function updateTime() {

						let year = date.getFullYear(); //当前年份
						let month = date.getMonth() + 1; //当前月
						month < 10 ? month = "0" + month : month;
						let day = date.getDate(); //当前天 
						day < 10 ? day = "0" + day : day;

						date_day.innerHTML = "";
						date_time.innerText = year + "年 " + month + "月"; //标题时间

						var setDate = new Date(year, month, 0);
						var setDay = setDate.getDate(); //这个月天数
						var setWeek = new Date(year, month - 1, 1).getDay(); //上个月星期几
						var setDayEM = new Date(year, month - 1, 0).getDate(); //上个月天数

						//渲染上个月星期
						setWeek <= 0 ? setWeek = 7 : setWeek;
						for (let i = (setDayEM - setWeek) + 1; i <= setDayEM; i++) {
							let EmptyDiv = document.createElement('div');
							EmptyDiv.innerText = i;
							EmptyDiv.className = "Disable";
							date_day.appendChild(EmptyDiv);
						}

						// 渲染日期
						for (let i = 1; i <= setDay; i++) {
							let TimeDiv = document.createElement('div');
							TimeDiv.innerText = i;
							TimeDiv.className = "item-time";
							if (i == day) {
								TimeDiv.classList.add("active");
							}
							date_day.appendChild(TimeDiv);
						}
						// 渲染尾部
						for (let i = 1; i <= (42 - setWeek - setDay); i++) {
							let DisDiv = document.createElement('div');
							DisDiv.innerText = i;
							DisDiv.className = "Disable";
							date_day.appendChild(DisDiv);
						}
						itemClick(year,month);
					}

					updateTime();
					prev.onclick = function() {
						date.setMonth(date.getMonth() - 1);
						updateTime();
					};
					next.onclick = function() {
						date.setMonth(date.getMonth() + 1);
						updateTime();
					};
					prev_year.onclick = function() {
						date.setYear(date.getFullYear() - 1);
						updateTime();
					};
					next_year.onclick = function() {
						date.setYear(date.getFullYear() + 1);
						updateTime();
					};

					function itemClick(year,month) {
						let item_time = document.querySelectorAll(".item-time");
						for (let i = 0; i < item_time.length; i++) {
							item_time[i].onclick = function() {
								for (let i = 0; i < item_time.length; i++) {
									item_time[i].classList.remove("active");
								}
								this.classList.add("active");
								console.log(year + "年" + month + "月"+this.innerText+"日");//获取日期
							}
						}
					}
				</script>
	</body>
</html>