js 日历插件开发
1.HTML完整代码如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="style.css" /><style>.datepicker{border: 1px solid #ccc;border-radius: 4px;padding: 5px;height: 24px;line-height: 24px;width: 230px;margin: 50px auto;display: block;}.datepicker:focus{outline: 0 none;border: 1px solid #1abc9c;}</style> </head> <body><input type="text" class="datepicker" /><script src="data.js"></script><script src="main.js"></script><script>datepicker.init('.datepicker');</script> </body> </html>
2.css样式如下:
.ui-datepicker-wrapper{width: 240px;font-size: 16px;color: #666;box-shadow: 2px 2px 8px 2px rgba(128, 128, 128, 0.3);display: none;position: absolute; } .ui-datepicker-wrapper-show{display: block; } .ui-datepicker-wrapper .ui-datepicker-header{padding: 0 20px;height: 50px;line-height: 50px;text-align: center;background: #f0f0f0;border-bottom: 1px solid #ccc;font-weight: bold; } .ui-datepicker-wrapper .ui-datepicker-btn{font-family: serif;font-size: 20px;width: 20px;height: 50px;line-height: 50px;color: #1abc9c;text-align: center;cursor: pointer;text-decoration: none; } .ui-datepicker-wrapper .ui-datepicker-prev-btn{float: left; } .ui-datepicker-wrapper .ui-datepicker-next-btn{float: right; } .ui-datepicker-wrapper .ui-datepicker-body table{width: 100%;border-collapse: collapse; } .ui-datepicker-wrapper .ui-datepicker-body th, .ui-datepicker-wrapper .ui-datepicker-body td{text-align: center;height: 30px; } .ui-datepicker-wrapper .ui-datepicker-body th{font-size: 12px;height: 40px;line-height: 40px; } .ui-datepicker-wrapper .ui-datepicker-body td{font-size: 10px;border: 1px solid #f0f0f0;cursor: pointer; } .ui-datepicker-wrapper .ui-datepicker-body td.not{color: #c0bbbb;font-weight: normal; } .ui-datepicker-wrapper .ui-datepicker-body td.active{background-color: #1abc9c;font-weight: normal;color: #fff; }
3.js代码如下:
data.js如下:
(function(){var datepicker = {};datepicker.getMonthData = function(year, month){var ret = [];// month 为真实的数据if(!year || !month){// if(!year && !month){ var today = new Date();year = today.getFullYear();month = today.getMonth() + 1;}// 当月第一天var firstDay = new Date(year, month-1, 1);// 当月第一天的星期几var firstDayWeekDay = firstDay.getDay();// 周日处理if(firstDayWeekDay === 0){firstDayWeekDay = 7;}year = firstDay.getFullYear();month = firstDay.getMonth() + 1;// if(month < 10){// month = "0" + month;// }//上个月的最后一天 (当月的第0天)var lastDayOfLastMonth = new Date(year, month-1, 0);//上个月的最后一天的日期var lastDateOfLastMonth = lastDayOfLastMonth.getDate();//当月第一天前面显示多少上月的数据var preMonthDayCount = firstDayWeekDay - 1;//当月的最后一天var lastDay = new Date(year, month, 0);//当月的最后一天的日期var lastDate = lastDay.getDate();for(var i = 0; i < 7*6; i++){//当月对应的日期var date = i + 1 - preMonthDayCount;var showDate = date; //显示的是哪一天var thisMonth = month; //当月if(date <= 0){//上一月thisMonth = month - 1;showDate = lastDateOfLastMonth + date;}else if(date > lastDate){//下一月thisMonth = month + 1;showDate = showDate - lastDate;} if(thisMonth === 0){thisMonth = 12;}if(thisMonth === 13){thisMonth = 1;}ret.push({year: year,month: thisMonth,date: date,showDate: showDate})}return {year: year,month: month,days: ret,lastDate: lastDate};}window.datepicker = datepicker; })();
main.js如下:
(function(){var datepicker = window.datepicker;var monthData;var $wrapper;//querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。datepicker.buildUi = function(year, month){monthData = datepicker.getMonthData(year,month);var html = '<div class="ui-datepicker-header">'+'<a href="#" class="ui-datepicker-btn ui-datepicker-prev-btn"><</a>'+'<a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">></a>'+'<span class="ui-datepicker-curr-month">'+monthData.year+'-'+padding(monthData.month)+'</span>'+'</div>'+'<div class="ui-datepicker-body">'+'<table>'+'<thead>'+'<tr>'+'<th>一</th>'+'<th>二</th>'+'<th>三</th>'+'<th>四</th>'+'<th>五</th>'+'<th>六</th>'+'<th>日</th>'+'</tr>'+'</thead>'+'<tbody>'; for(var i = 0; i < monthData.days.length; i++ ){var date = monthData.days[i];if(i%7 === 0){html += "<tr>";}// html += '<td data-date="'+date.date+'">'+date.showDate+'</td>';if(date.date <= 0 || date.date > monthData.lastDate){html +='<td class="not" data-date="'+ date.date +'">'+date.showDate+'</td>';}else if(date.year === (new Date()).getFullYear() && date.month === ((new Date()).getMonth()+1) && date.date === (new Date()).getDate()){html +='<td class="active" data-date="'+ date.date +'">'+date.showDate+'</td>';}else{html +='<td data-date="'+ date.date +'">'+date.showDate+'</td>';}if(i%7 === 6){html += "</tr>";}};html += '</tbody>'+'</table>'+'</div>';return html;};datepicker.render = function(direction){var year,month;if(monthData){year = monthData.year;month = monthData.month;}if(direction === 'prev'){month--;if(month === 0){month = 12;year--;}}if(direction === 'next'){month++;}// var html = datepicker.buildUi(year, month);// $wrapper = document.createElement("div");// $wrapper.className = 'ui-datepicker-wrapper';// $wrapper.innerHTML = html;// document.body.appendChild($wrapper);var html = datepicker.buildUi(year, month);$wrapper = document.querySelector('.ui-datepicker-wrapper');if(!$wrapper){$wrapper = document.createElement("div");document.body.appendChild($wrapper);$wrapper.className = 'ui-datepicker-wrapper';}$wrapper.innerHTML = html;}datepicker.init = function(input){datepicker.render();var $input = document.querySelector(input);var isOpen = false;$input.value = format(new Date());$input.addEventListener('click',function(){if(isOpen){$wrapper.classList.remove('ui-datepicker-wrapper-show')isOpen = false;}else{$wrapper.classList.add('ui-datepicker-wrapper-show')var left = $input.offsetLeft;var top = $input.offsetTop;var height = $input.offsetHeight;$wrapper.style.top = top + height + 2 + "px";$wrapper.style.left = left + "px"; isOpen = true;}},false);$wrapper.addEventListener('click',function(e){var $target = e.target;if(!$target.classList.contains('ui-datepicker-btn')){return;}// 上一月if($target.classList.contains('ui-datepicker-prev-btn')){datepicker.render('prev');}// 下一月else if($target.classList.contains('ui-datepicker-next-btn')){datepicker.render('next');}}, false);$wrapper.addEventListener('click',function(e){var $target = e.target;if($target.tagName.toLowerCase() !== 'td'){return;}var date = new Date(monthData.year, monthData.month - 1, $target.dataset.date);$input.value = format(date);$wrapper.classList.remove('ui-datepicker-wrapper-show')isOpen = false;}, false);}var padding = function(num){if(num <= 9){return "0"+num;}return num;}function format(date){var ret = '';ret += date.getFullYear() + "-";ret += padding(date.getMonth() + 1) + "-";ret += padding(date.getDate());return ret;} })();
4.最终完成效果如下:
转载于:https://www.cnblogs.com/CooLLYP/p/8479775.html
js 日历插件开发相关推荐
- 原生js日历选择器插件开发实例教程
在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...
- JS日历控件集合----附效果图、源代码
在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为重要. 尽管ASP.NET也集成了日历控件,但是其集成的代码量很大,你可以做一个测试,当你在页面使用一个日历控件时,在发 ...
- JS日历控件优化(增加时分秒)
JS日历控件优化 在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下: 1. 在原基础上 支持 yyyy-mm- ...
- php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用:xvDate( ...
- js日历农历_中国农历日历的全部日历
js日历农历 Vue月球全日历 (vue-lunar-full-calendar) Chinese lunar calendar for Fullcalendar. Fullcalendar的中国农历 ...
- 百度的Js日历,值得一看
转自: http://www.codefans.net/jscss/code/1715.shtml (有Demo) 本JavaScript日历是从百度网站里整理出来的,费了很大劲,因为感觉这个日历简直 ...
- html时间选择器时分秒,原生js日历日期控件带时分秒日期选择器
特效描述:原生js日历日期 时分秒日期选择器.时分秒日期选择 代码结构 1. 引入JS 2. HTML代码 [注意事项] 一.请千万勿移动laydate中的目录结构,它们具有完整的依赖体系.使用时,只 ...
- js日历 日文 日本版本+html
js日历 日文 日本版本+html 下载地址 js日历日文日本版本+html-Javascript文档类资源-CSDN下载
- JS日历控件不显示2021年问题, 不显示2021年以后的年份,怎么解决?
JS日历控件不显示2021年问题, 不显示2021年以后的年份,怎么解决? //日历 var date_start,date_end,g_object var today = new Date(); ...
最新文章
- 【论文写作】轻松搞掂IEEE系列期刊的文章模板
- 20162321王彪 2017-2018-1 《程序设计与数据结构》第三周学习总结
- 使用adb命令查看Sqlite数据库
- 小程序wx.createInnerAudioContext()获取不到时长问题
- dex运行linux,随着三星最新的DeX更新,更多的手机可以使用Linux
- Windows Azure 安全最佳实践 - 第 6 部分:Azure 服务如何扩展应用程序安全性
- .Net Core跨平台应用研究-HelloArm(串口篇)
- 利用redis List队列简单实现秒杀 PHP代码实现
- 4位无符号比较器设计
- 数据库发展研究报告(2021年)
- H3C进入目录---用户视图
- 论文阅读-Rethinking ImageNet Pre-trainging
- 非科班学生党的2022秋招之路 -- 一路艰辛
- 蜂窝移动网络是什么?它和Wi-Fi有什么区别?
- MTK6577+Android启动----pre-loader
- git bash粘贴快捷键
- c# NPOI 导出Excel 冻结窗格
- oracle ddl大全,[数据库]Oracle_DDL
- JQuery 拖拽元素,并移动其他元素位置
- android arcgis使用自定义图片背景底图(tif图片制作)