网上有很多实现日期插件的方法，不过扩展了些，相对于项目实用方法。
html结构及其配置参数
引入css，引入js即可，值得兴奋的事是用原生js编写的，所以量级方面会小一点，当然这个插件并不是很炫，不过确实很实用
日期插件
CSS代码
这个css需要处理一下默认样式，默认样式使用网上相对简单标准的样式初始化代码
body{
font-family: 'PingFangSC-Regular', 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 13px;
/*font-family:"Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;*/
}
html,body{
background-repeat: no-repeat;
-webkit-text-size-adjust:none;
}
.clearfix:after {
content: "." ;
display: block ;
height: 0 ;
clear: both ;
visibility: hidden ;
}
a{
text-decoration:none;
outline: none;
}
li{
list-style-type:none;
}
img{
width: 100%;
max-width: 100%;
/*vertical-align: top;*/
font-size:0.5rem;
}
html, body, h1, h2, h3, p, span, a, div, ol, ul, li, dl, dt, dd, table, tbody, tfoot, thead, tr, th, td, input, textarea, form, select {
padding: 0;
margin: 0;
/*font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;*/
box-sizing:border-box;
}
h1, h2, h3 {
font-size: 100%;
}
button{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
outline:none;
border:1px solid #ccc;
}
input[type=button],input[type=submit]{
-webkit-appearance:none;
outline:none;
}
/**
插件重要样式
*/
div.date_div_containers{
width: auto;
height: auto;
position: fixed;
top: 0;
left: 0;
display: none;
}
table.date_table_tables{
border: 1px solid #eeeeee;
border-collapse: collapse;
}
table.date_table_tables thead th{
width: 40px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #eee;
background: #eee;
color: #FFFFFF;
}
table.date_table_tables tbody td{
width: 40px;
height: 30px;
color: #333333;
line-height: 30px;
text-align: center;
border: 1px solid #eeeeee;
background: #fff;
cursor: pointer;
}
select.date_select_selts{
width: 25%;
height: 25px;
border: 1px solid #eeeeee;
}
JavaScript 代码
这块算是比较激动人心了吧？注释写的挺详细的，就不多说了。
/**
* Created by 涛 on 2017/4/18.
*/
function TaoDate(obj) {
var _this =this;
//扩展参数配置
this.bgColor=obj["skin"]?obj["skin"]:"#eee";
this.interval=obj["interval"]?obj["interval"]:"-";
//渲染头部，以及表格头节点
this.setDateDom(obj["dateId"]);
//初始化select内容
this.sElect(obj["dateId"]);
//渲染表格盒子
this.dateBox(obj["dateId"]);
//扩展换肤功能
this.dateSkin(this.bgColor,obj["dateId"]);
//讲日期放在table盒子当中
this.Tab(obj["dateId"]);
//规定日期盒子位置函数
this.inputOffset(obj["dateId"]);
var myDiv =document.getElementById(obj["dateId"]+"_divId");
var divArray =document.getElementsByClassName("date_div_containers");
var ipt =document.getElementById(obj["dateId"]);
ipt.setAttribute("readonly","readonly");
//当配置好这个控件，显示本地年月日
var iptVal =new Date();
ipt.value=iptVal.getFullYear()+this.interval+(iptVal.getMonth()+1)+
this.interval+iptVal.getDate();
//============================事件区域=================
//点击输入框
ipt.onfocus=function(){
//保证每次只能有一个input能出现日期盒子
for(var i =0;i";
}
return str;
}
/**
* 初始化年份，月份！
*/
TaoDate.prototype.sElect=function(id){
var sel= document.getElementById(id+"_divId").getElementsByClassName("date_select_selts");
sel[0].innerHTML=this.forVal(1990,2099);
sel[1].innerHTML=this.forVal(1,12);
var date =new Date();
sel[0].value=date.getFullYear();
sel[1].value=date.getMonth()+1;
}
/**
* 通过div上id创建表格
* @param id
*/
TaoDate.prototype.dateBox=function(id){
var div1 =document.getElementById(id+"_date_table_tables");
for(var i =0;i<6;i++){
var aTR = document.createElement("tr");
div1.tBodies[0].appendChild(aTR);
for(var j =0;j<7;j++){
var aTd =document.createElement("td");
div1.tBodies[0].rows[i].appendChild(aTd);
}
}
}
TaoDate.prototype.Tab=function(id){
var tds = document.getElementById(id+"_date_table_tables")
.getElementsByTagName("td");
var date =new Date();
//渲染前先清空，避免上次与本次内容冲突
for(var j=0;j 总结：
插件开发方式有很多，其实应该再插件里面写一个默认参数对象的。用传入的对象参数覆盖，默认参数，而且应该多多抽象一些方法，如可以单独抽象出document.getElementById方法，追其根本，有意无意模仿了一波jquery，不过量级上肯定是小的。