原生js实现日期选择插件 xs-DatePicker
**
效果图
**
**
简介
通过原生HTML/CSS/JavaScript完成一个日期选择器。
代码如下：
**
<!-- 时间：-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"> 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>
