自己制作的一款日期插件

其他 2018-06-25 12:54:55 阅读次数: 2

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


                    
                    
                    
                    
                    
                    
                    
                    
                    

                        
猜你喜欢

                        

                            
                            
                        

                    


                    
转载自blog.csdn.net/ccj1990528/article/details/45057767

                    

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

                    


                

            

            


                

                    

                        
                        
                        
                        
                    


                    

                        

                            

                                今日推荐
                            


                            

                        

                    

                    

                        

                            

                                面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
                            

                        

                        

                            

                                开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
                            

                        

                        

                            

                                中国码农的“35岁魔咒”
                            

                        

                        

                            

                                蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
                            

                        

                        

                            

                                Arc Browser for Windows 1.0 正式 GA
                            

                        

                        

                            

                                90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
                            

                        

                        
                        
                    

                


                

                    

                        

                            

                                周排行
                            

                            

                        

                    

                    

                        

                            

                                OOP第二次作业
                            

                        

                        

                            

                                java web 乱码问题
                            

                        

                        

                            

                                android 禁止scrollview 因控件变化自动滚动到底的方法
                            

                        

                        

                            

                                mysql服务解压版的安装(5.7)
                            

                        

                        

                            

                                centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
                            

                        

                        

                            

                                使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
                            

                        

                        

                            

                                面向对象之------多态与多态性
                            

                        

                        

                            

                                开发Teams Tabs应用程序
                            

                        

                        

                            

                                C# 希尔排序
                            

                        

                        

                            

                                第2章 Jupyter Notebooks
                            

                        

                    

                

                

                    

                        

                            

                                每日归档
                            

                            

                                更多
                            

                            

                        

                    

                    

                        

                            2024-05-06(40)
                        

                        

                            2024-05-05(0)
                        

                        

                            2024-05-04(7)
                        

                        

                            2024-05-03(19)
                        

                        

                            2024-05-02(0)
                        

                        

                            2024-05-01(4)
                        

                        

                            2024-04-30(1)
                        

                        

                            2024-04-29(40)
                        

                        

                            2024-04-28(0)
                        

                        

                            2024-04-27(56)
                        

                    

                


            


            
        

    






















    


        

            
代码天地 © 2018 codetd.com

            境外服务器
             
            最新电视剧2022