自己制作的一款日期插件

时间：2022-12-16 14:37:06

一直在考虑制作一款日期插件，以前一直没时间，也觉得自己肯定完不成这个插件的，最近一段时间事儿不是狠多，就留给了自己足够的时间去开发这一款插件，开发过程中你就会发现其实真的特么的很简单，有些看起来很难很不好下手的东西，其实真正制作起来就会觉得很简单了为了便于管理我将整个css代码分成了三份不同的文件，以便于以后的维护，虽然这个项目不用这么麻烦，可能是习惯问题吧。
废话不多说了，先看看html代码吧

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>无标题文档</title>
<script src="js/jquery.min.js"></script>
<script src="js/datepick.js"></script>
<link rel="stylesheet" type="text/css" href="css/public.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>

<body>
<input type="text" class="pickDate">
</body>
<script>
var option={
width:$(".pickDate").width(),
height:"30%",
x:$(".pickDate").offset().left,
y:$(".pickDate").offset().top+$(".pickDate").height()+2,
parentnode:$("body"),
preyear:7,
nextyear:10
};
$(".pickDate").focus(function(e) {
        var datepickfun=new main(option);
datepickfun.init();
    });
</script>
</html>
这里只是做了一个demo所以没有理会布局什么的，只有一个很简单的输入框，获取焦点的时候会显示日期界面，选择日期以后，日期界面会消失。

代码的css分为三个部分，一部分是public.css，这一部分是公共样式；一部分是style.css，这一部分是日期的样式表；最后一部分是css.css，这一部分是布局的样式表。

public.css:

@charset "utf-8";
/* CSS Document */

*{ margin:0; padding:0;-moz-box-sizing:content-box; box-sizing:content-box; -webkit-box-sizing:content-box; -0-box-sizing:content-box;}
ul,ol{ list-style:none;}
img,input{border:none;}
table{ border-collapse:collapse;}

style.css:

@charset "utf-8";
/* CSS Document */
.dateYeardescBtn,.dateYearaddBtn,.dateMonthdescBtn,.dateMonthaddBtn{border:none;background-color:#FFF;}
.dateYeardescBtn,.dateMonthdescBtn{border-right:1px #999 solid;}
.dateYearaddBtn,.dateMonthaddBtn{border-left:1px #999 solid;}
.dateYMChoose{ border-bottom:1px cornflowerblue solid;}
.dateContainner{position:absolute;overflow:hidden;border:1px #ccc solid;}
.dateYMChoose{position:absolute;width:98%;left:1%;top:0;height:13%;}
.dateYChoose,.dateMChoose{position:absolute;width:47%;top:7%;height:80%;border:1px #999 solid;}
.dateYChoose{left:2%;}.dateMChoose{left:51%;}
.dateYear,.dateMonth{position:absolute;width:40%;left:30%;top:10%;height:80%;text-align:center;}
.dateYeardescBtn,.dateMonthdescBtn,.dateYearaddBtn,.dateMonthaddBtn{position:absolute;width:29%;top:0%;height:100%;text-align:center;}
.dateYeardescBtn,.dateMonthdescBtn{left:0%;}
.dateYearaddBtn,.dateMonthaddBtn{left:70%;}
.datedetail{/*position:absolute;*/width:98%;margin-left:1%;margin-top:10%;height:85%;text-align:center;}
.datedetail tr{width:100%;height:14%;text-align:center;border-bottom:1px #999 solid;}
.datedetail tr td{width:14.2857%;text-align:center;}
/*.datedetail tr:nth-child(n+2) td:hover{cursor:pointer; background-color:#CCC;}*/
 

css.css：
 

<pre name="code" class="css">@charset "utf-8";/* CSS Document */.pickDate{ min-width:180px; max-width:350px; width:35%; height:25px; margin-left:20px; margin-top:20px; border:1px #000 solid;}
 

 

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre"></span>然后是重头戏了，就是对javascript的代码的编写。代码去下：</span>
 

<span style="font-family: Arial, Helvetica, sans-serif;"></span>
 

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="javascript">// JavaScript Documentfunction main(option){this.width=option.width;this.height=option.height;this.offsetLeft=option.x;this.offsetTop=option.y;this.parentnode=option.parentnode;this.preyear=option.preyear;this.nextyear=option.nextyear;this.weekArray=["日","一","二","三","四","五","六"];this.index=0;this.mockdate;this.startindex;this.date=new Date();this.dateTime;//this.showlog(this.dateTime);}main.prototype={init:function(){this.clearDate();//......................................添加元素.........................................................//创建日期整体的样子this.elem_containner=this.createElem("div","dateContainner");this.elem_containner.style.height=this.height;this.elem_containner.style.width=this.width+"px";this.elem_containner.style.left=this.offsetLeft+"px";this.elem_containner.style.top=this.offsetTop+"px";this.parentnode.append(this.elem_containner);//.........................................................................................//创建年份和月份的选择的整体样子this.chooseYM=this.createElem("div","dateYMChoose");this.elem_containner.appendChild(this.chooseYM);//创建年份选择容器this.chooseY=this.createElem("div","dateYChoose");this.chooseYM.appendChild(this.chooseY);//创建年份显示栏目this.chooseYear=this.createElem("input","dateYear");//this.chooseYear.readonly="readonly";this.chooseY.appendChild(this.chooseYear);$(".dateYear").attr("readonly","readonly");$(".dateYear").val(this.date.getFullYear());//创建年份减少调控按钮this.chooseYeardescBtn=this.createElem("button","dateYeardescBtn");this.chooseY.appendChild(this.chooseYeardescBtn);$(".dateYeardescBtn").html("一");//创建年份增加调控按钮this.chooseYearaddBtn=this.createElem("button","dateYearaddBtn");this.chooseY.appendChild(this.chooseYearaddBtn);$(".dateYearaddBtn").html("+");//...............................................................................//创建月份选择容器this.chooseM=this.createElem("div","dateMChoose");this.chooseYM.appendChild(this.chooseM);//创建月份显示栏目this.chooseMonth=this.createElem("input","dateMonth");//this.chooseYear.readonly="readonly";this.chooseM.appendChild(this.chooseMonth);$(".dateMonth").attr("readonly","readonly");$(".dateMonth").val(this.date.getMonth()+1);//创建年份减少调控按钮this.chooseMonthdescBtn=this.createElem("button","dateMonthdescBtn");this.chooseM.appendChild(this.chooseMonthdescBtn);$(".dateMonthdescBtn").html("一");//创建年份增加调控按钮this.chooseMonthaddBtn=this.createElem("button","dateMonthaddBtn");this.chooseM.appendChild(this.chooseMonthaddBtn);$(".dateMonthaddBtn").html("+");this.dateTime=new Date($(".dateYear").val()+"/"+$(".dateMonth").val()+"/01")//.......................................................................................//创建日期详细信息表this.adddateDetail();this.bindEvent();},//.......................................................................................//创建日期详细信息表adddateDetail:function(){this.index = this.dateTime.getDay();this.mockdate=this.dateTime;this.startindex=this.index;var _this=this;this.datetable=this.createElem("table","datedetail")this.elem_containner.appendChild(this.datetable);for(var i=0;i<7;i++){this.datetr=this.createElem("tr","")this.datetable.appendChild(this.datetr);for(var j=0;j<7;j++){this.datetd=this.createElem("td","")this.datetr.appendChild(this.datetd);if(i==0){this.datetd.innerHTML=this.weekArray[j];}//this.showlog(this.dateTime);if(this.startindex>0&&i>0){console.log(this.startindex);console.log(this.mockdate);this.mockdate=new Date((this.dateTime/1000-86400*this.startindex)*1000);this.datetd.innerHTML=this.mockdate.getDate();this.datetd.style.color="#ccc";this.startindex--;console.log(this.mockdate);}else if(this.startindex==0&&i>0){if(j==this.index&&i>0){if(this.dateTime.getDate()<10){if((this.dateTime.getMonth()+1)==$(".dateMonth").val()){this.datetd.innerHTML="0"+this.dateTime.getDate();this.datetd.addEventListener("click",function(ev){_this.choosedDate(ev,_this)},false);this.datetd.addEventListener("mouseover",function(ev){_this.changebg(ev)},false);this.datetd.addEventListener("mouseout",function(ev){_this.returnbg(ev)},false);}else{this.datetd.innerHTML="0"+this.dateTime.getDate();this.datetd.style.color="#ccc";}//console.log(this.dateTime);}else{if((this.dateTime.getMonth()+1)==$(".dateMonth").val()){this.datetd.innerHTML=this.dateTime.getDate();this.datetd.addEventListener("click",function(ev){_this.choosedDate(ev,_this)},false);this.datetd.addEventListener("mouseover",function(ev){_this.changebg(ev)},false);this.datetd.addEventListener("mouseout",function(ev){_this.returnbg(ev)},false);}else{this.datetd.innerHTML=this.dateTime.getDate();this.datetd.style.color="#ccc";}}}this.dateTime=new Date((this.dateTime/1000+86400)*1000);this.index = this.dateTime.getDay();}}}},returnbg:function(ev){ev.target.style.backgroundColor="";ev.target.style.cursor="";},changebg:function(ev){ev.target.style.backgroundColor="#ccc";ev.target.style.cursor="pointer";},//........................................绑定事件.............................................bindEvent:function(){var _this=this;this.chooseYeardescBtn.addEventListener("click",function(ev){_this.descYear(ev,_this)},false);this.chooseYearaddBtn.addEventListener("click",function(ev){_this.addYear(ev,_this)},false);this.chooseMonthdescBtn.addEventListener("click",function(ev){_this.descMonth(ev,_this)},false);this.chooseMonthaddBtn.addEventListener("click",function(ev){_this.addMonth(ev,_this)},false);},//.................................添加元素..............................................createElem:function(tagname,classname){var elem = document.createElement(tagname);elem.className=classname;return elem;},//..................................对日期的操作................................................//选择日期choosedDate:function(ev,_this){var dateDay = $(ev.target).html();var dateMonth=_this.chooseMonth.value;var dateYear=_this.chooseYear.value;$(".pickDate").val(dateYear+"-"+dateMonth+"-"+dateDay);_this.clearDate();},//减少年份descYear:function(ev,_this){ev.preventDefault();var nowYear=$(".dateYear").val()-0;if(nowYear+_this.preyear>_this.date.getFullYear()){$(".dateYear").val(nowYear-1);}this.dateTime=new Date($(".dateYear").val()+"/"+$(".dateMonth").val()+"/01");this.clearDateDetail();this.adddateDetail();},//增加年份addYear:function(ev,_this){ev.preventDefault();var nowYear=$(".dateYear").val()-0;if(nowYear-_this.nextyear<_this.date.getFullYear()){$(".dateYear").val(nowYear+1);}this.dateTime=new Date($(".dateYear").val()+"/"+$(".dateMonth").val()+"/01");this.clearDateDetail();this.adddateDetail();},//减少月份descMonth:function(ev,_this){ev.preventDefault();var nowMonth=$(".dateMonth").val()-0;if(nowMonth>1){$(".dateMonth").val(nowMonth-1);}this.dateTime=new Date($(".dateYear").val()+"/"+$(".dateMonth").val()+"/01");this.clearDateDetail();this.adddateDetail();},//增加月份addMonth:function(ev,_this){ev.preventDefault();var nowMonth=$(".dateMonth").val()-0;if(nowMonth<12&&nowMonth>=1){$(".dateMonth").val(nowMonth+1);}this.dateTime=new Date($(".dateYear").val()+"/"+$(".dateMonth").val()+"/01");this.clearDateDetail();this.adddateDetail();},//....................................公共的方法..........................................showlog:function(s){console.log(s);},//清除日期整个显示界面clearDate:function(){$(".dateContainner").remove();},//清除日期显示的tableclearDateDetail:function(){$(".datedetail").remove();}}




 

 

<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
 

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre"></span>整个代码我都写了很多注释，一遍大家都能看懂，这些代码也是比较基础的代码，都是由最基层的代码编写而成的，逻辑上的实现也是比较简单的，没有用到很复杂的逻辑想法或者是算法之类的，跟着我的注释一步步走的话，很简单就能了解整个写法和方法之间的调用。</span>
 

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre"></span>谢谢关注此博客，如果您有更好的建议或者更好的想法，希望您能不吝赐教，一起学习，进步。</span>
 

 

标签：
相关文章