最近网站备案通过了。可以放一些示例代码在上面了。查看之前写的文章。想把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.代码结构更清晰。
使用注意:
1.
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