一直在考虑制作一款日期插件,以前一直没时间,也觉得自己肯定完不成这个插件的,最近一段时间事儿不是狠多,就留给了自己足够的时间去开发这一款插件,开发过程中你就会发现其实真的特么的很简单,有些看起来很难很不好下手的东西,其实真正制作起来就会觉得很简单了为了便于管理我将整个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 Document
function 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();
},
//清除日期显示的table
clearDateDetail: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>