モジュール化思想を書き換える前に書いたMy 97 DatePickerの例
最近ウェブサイトが登録されました.いくつかの例示的なコードを上に置いてもいいです.前に書いた文章を確認します.デモを整理して載せたいです.前に書いたコードはまだ足りないところが多いです.
前にコードを書いて、機能の実現をもっと重視します.重用性とモジュール化に対する考慮は比較的少ない.紙の上は結局浅いので、前の文章で書いたこの効果を書き直すことにしました.
My97 DatePickerの2つの日付範囲は30日を超えない.最初は2番目より小さく、現在の日付より大きくない.
picker 1.js
少なくとも次のような利点がある.
1.呼び出しが簡単です.各inputにjsコードをたくさん書く必要はありません. コントロールのjsを導入するだけです.二つのコードを再起動します.着信開始日inputのid、終了日inputのid、および2つの日付の間の間隔.実現できる
3.コード構造がより明確である.
使用上の注意:
1.
2.picker 1にはまだ解決ie 8を加えてbindの解決をサポートしていません.
前にコードを書いて、機能の実現をもっと重視します.重用性とモジュール化に対する考慮は比較的少ない.紙の上は結局浅いので、前の文章で書いたこの効果を書き直すことにしました.
My97 DatePickerの2つの日付範囲は30日を超えない.最初は2番目より小さく、現在の日付より大きくない.
picker 1.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)-1;
D=parseInt(D) - 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})
}
};<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、および2つの日付の間の間隔.実現できる
var picker1 = new Picker1("datepicker1","datepicker2",30);
picker1.init();3.コード構造がより明確である.
使用上の注意:
1.
var picker1 = new Picker1("datepicker1","datepicker2",30);
picker1.init();2.picker 1にはまだ解決ie 8を加えて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;
};
}