模块化思想重写之前写的My97DatePicker的例子

最新推荐文章于 2017-08-04 14:23:05 发布

liusaint1992

最新推荐文章于 2017-08-04 14:23:05 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript 前端文章标签： My97DatePicker JavaScript模块化 JavaScript组件化

本文链接：https://blog.csdn.net/liusaint1992/article/details/50449718

版权

JavaScript 同时被 2 个专栏收录

62 篇文章 4 订阅

订阅专栏

前端

56 篇文章 5 订阅

订阅专栏

最近网站备案通过了。可以放一些示例代码在上面了。查看之前写的文章。想把demo整理出来放上去。发现之前写的代码还是有很多不足的地方。

之前写代码，更注重功能的实现。对重用性和模块化的考虑相对比较少。纸上得来终觉浅，决定重写一下之前文章里写过的这个效果。

My97DatePicker两个日期范围不超过30天，第一个小于第二个，都不大于当前日期

picker1.js

var Picker1 = function(startEle,endEle,day){
	this.md = new Date();
	this.startEle = startEle;
	this.endEle = endEle;
	this.day = -day;
}

Picker1.prototype = {
	init:function(){
		//初始化控件。给开始日期输入框和结束的输入框绑定事件。传入合理的参数。注意this。
		var that = this;
		document.getElementById(this.startEle).onfocus = function(){
			that.picker1rule(this);
		}
		document.getElementById(this.endEle).onfocus = function(){
			that.picker2rule(this);
		}
	},
	picker1rule:function(ele){
		//开始日期的输入框的规则
		
		var pickedfunBind = this.pickedFunc.bind(ele,this);
		var onclearedBind = this.clearedFun.bind({},this);

		WdatePicker({maxDate:'#F{$dp.$D(\''+this.endEle+'\')||\'new Date()\'}',minDate:'#F{$dp.$D(\''+this.endEle+'\',{d:'+this.day+'})}',onpicked:pickedfunBind,oncleared:onclearedBind})
	},
	pickedFunc:function(that){
		//开始日期的输入框的规则，onpicked时候的动作
		var Y=$dp.cal.getP('y');
		var M=$dp.cal.getP('M');
		var D=$dp.cal.getP('d');

		M=parseInt(M,10)-1;
		D=parseInt(D,10) - that.day;　//超过30天，也能自动处理。
		var d = new Date()
		d.setFullYear(Y,M,D) //设置时间

		var nowDate=new Date();　
		//跟现在的时间比较，如果算出来的值大于现在时间，修改全局变量md为现在时间。否则为算出来的时间。
		if(nowDate<=d){
			that.md=nowDate;
		}else{
			var month=d.getMonth()+1; //月份的范围是（0到11）;
			that.md=d.getFullYear()+"-"+month+"-"+d.getDate(); //直接把d给过去会有问题，所以拼成字符串发过去
		}
		// console.log(that.md,that,'in picked');
	},
	clearedFun:function(that){
		//开始日期的输入框的规则，onpicked时候的动作oncleared
		that.md=new Date();
		// console.log(that.md,that,'in clear');
	},
	picker2rule:function(ele){
		// console.log(this.md,this,"in picker2rule");
		WdatePicker({el:ele,minDate:'#F{$dp.$D(\''+this.startEle+'\')}',maxDate:this.md})
	}
};

datepicker.html

<html>
<head>
	<meta charset="utf-8">
	<title>My97DatePicker示例</title>
	<script type="text/javascript" src="../libs/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="picker1.js"></script>
	<link type="text/css" href="97.css" rel="stylesheet" media="all" />
</head>

<body>

	<h1>My97DatePicker代码演示</h1>

	<article class="demo">
		<h2>1.两日期时间相差30天，不超过当前日期，控件Picker1</h2>
		开始时间：<input type="text" class="date_input" id="datepicker1"/>
		结束时间：<input type="text" class="date_input" id="datepicker2"/>
	</article>


	<article class="demo">
		<h2>1.两日期时间相差15天，不超过当前日期,控件Picker1</h2>
		开始时间：<input type="text" class="date_input" id="datepicker3"/>
		结束时间：<input type="text" class="date_input" id="datepicker4"/>
	</article>

	<script type="text/javascript">
		var picker1 = new Picker1("datepicker1","datepicker2",30);
		picker1.init();
		var picker2 = new Picker1("datepicker3","datepicker4",15);
		picker2.init();
	</script>


</body>
</html>

对比上一个文章里的实现。

至少有下面这些优点：

1.调用简单。不用再在每一个input里写一大堆js代码。只要引入控件的js。再调用两句代码。传入起始日期input的id，结束日期input的id，以及两个日期之间的间隔。就可以实现。

		var picker1 = new Picker1("datepicker1","datepicker2",30);
		picker1.init();

2.可重用。之前的代码主要依靠一个全局变量md来修改结束日期的截止日期。所以一个页面只能有一个实例。现在使用新的方法。将这个md变成一个实例的实例属性。实例之间互相不会影响。也不会污染全局变量。

3.代码结构更清晰。

使用注意：

		var picker1 = new Picker1("datepicker1","datepicker2",30);
		picker1.init();

初始化要放在这两个输入框后面的位置里。当然，也可以放在 window.onload里面。

2.在picker1中还要加入解决ie8不支持bind的解决。

//IE9以下不能使用bind的处理。
if (!Function.prototype.bind) { 
	Function.prototype.bind = function (oThis) { 
		if (typeof this !== "function") { 
			throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); 
		} 
		var aArgs = Array.prototype.slice.call(arguments, 1), 
		fToBind = this, 
		fNOP = function () {}, 
		fBound = function () { 
			return fToBind.apply(this instanceof fNOP && oThis ? this: oThis, 
				aArgs.concat(Array.prototype.slice.call(arguments))); 
		}; 
		fNOP.prototype = this.prototype; 
		fBound.prototype = new fNOP(); 
		return fBound; 
	}; 
}

演示地址：http://runningls.com/demos/97/datepicker.html

liusaint1992

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
模块化思想重写之前写的My97DatePicker的例子

最近网站备案通过了。可以放一些示例代码在上面了。查看之前写的文章。想把demo整理出来放上去。发现之前写的代码还是有很多不足的地方。之前写代码，更注重功能的实现。对重用性和模块化的考虑相对比较少。纸上得来终觉浅，决定重写一下之前文章里写过的这个效果。My97DatePicker两个日期范围不超过30天，第一个小于第二个，都不大于当前日期picker1.js va
复制链接

扫一扫