原生js实现日期选择器插件简单风格日期选择插件

原生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>

原生js实现日期选择器插件简单风格日期选择插件相关推荐

html鼠标点击有手势出来,用原生js+css3撸的一个下拉手势事件插件
; (function () { var DropDown = function (dropId = 'dropDwon', distance = 60, callBack = () => {} ...
android 之日期选择器,Android GUI 之日期选择器(DatePicker)
简单介绍下 DatePicker 和 Calender ,用他们两个实现日期选择器,并添加日期改变监听器将当前时间显示在下面的 TextView 上,日期改变时 TextView 上的日期相应改变 ...
日期选择器当前日期之前不允许选择
日期选择器当前日期之前不允许选择 java Date date= new Date(); model.addAttribute("startTime", date); freem ...
elementUI 日期选择器datepicker 设置禁用日期
本例记录ElementUI中DatePicker(日期选择器)设置日期项禁用状态的实现. 下图中将DatePicker的type设置为year,展示为年份选择器: 可以看到上图中2022.2023.2 ...
js日期控件_11个开源的Github开源日期选择器组件，供你选择
介绍本文主要介绍几个Vue的时间日期选择器组件,目的在于让开发者们多一些选择,不管是从功能还是从样式,都可以选择一个适合的组件,这些组件没有绝对的好与不好,就看个人如何选择了,以下分别介绍十一个日期 ...
Android中DatePicker日期选择器的使用和获取选择的年月日
场景实现效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现将布局改 ...
原生js模拟jQuery选择器功能及方法
模拟jQuery选择器功能及方法查看jQuery源码可以发现,jQuery中没有使用new操作符来创建新对象,而是采用调用jQuery原型中init()函数的方式返回一个新对象. 熟悉jQuery的 ...
js获取classname值_用原生JS获取CLASS对象(很简单实用)
听说是最常用....我是看了dom编程艺术想到的. 无标题文档 .ca{background-color:red; padding:20px;} .js{ border:1px solid #00F; ...
原生js 基于canvas写一个简单的前端截图工具
先看效果 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...

原生js实现日期选择器插件简单风格日期选择插件

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

效果图

简介

代码如下：

原生js实现日期选择器插件简单风格日期选择插件相关推荐

最新文章

热门文章

原生js实现日期选择器插件 简单风格日期选择插件

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

效果图

简介

代码如下：

原生js实现日期选择器插件 简单风格日期选择插件相关推荐

最新文章

热门文章

原生js实现日期选择器插件简单风格日期选择插件

原生js实现日期选择器插件简单风格日期选择插件相关推荐