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

最近网站备案通过了。可以放一些示例代码在上面了。查看之前写的文章。想把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时候的动作onclearedthat.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

模块化思想重写之前写的My97DatePicker的例子相关推荐

单片机小白学步系列（十六）单片机/计算机系统概述：模块化思想
截至目前,单片机入门篇的介绍就告一段落了.从本文开始将进入思想篇的学习. 思想篇对后面的具体知识学习进行整体的框架介绍,解释一些基础名词,以及对学习思想方法进行总结.思想篇的内容,对于后面的学习有很大 ...
母亲节html页面,[母亲节散分]模块化思想的重要性_html/css_WEB-ITnose
转载请注明出处, css探索之旅-飘零雾雨的庄园这里所讲的只是我个人针对前端开发的模块化思想设计的一些浅薄看法. 什么是模块化思想?模块化思想就是指将页面根据内容的关联性分解成不同的且相互独立的模块 ...
模块化思想——粤嵌GEC6818读取图片宽度、高度、色深
推荐阅读:C语言实现2048小游戏-粤嵌GEC6818嵌入式系统实训 C语言实现电子音乐相册-粤嵌GEC6818嵌入式系统实训模块化思想交叉编译两个c文件的方法: 模块化思想: ... 只有一个唯 ...
透彻理解Spring事务设计思想之手写实现
2019独角兽企业重金招聘Python工程师标准>>> 前言事务,是描述一组操作的抽象,比如对数据库的一组操作,要么全部成功,要么全部失败.事务具有4个特性:Atomicity(原 ...
【手写系列】透彻理解MyBatis设计思想之手写实现
前言 MyBatis,曾经给我的感觉是一个很神奇的东西,我们只需要按照规范写好XXXMapper.xml以及XXXMapper.java接口.要知道我们并没有提供XXXMapper.java的实现类, ...
【手写系列】透彻理解Spring事务设计思想之手写实现
事务,是描述一组操作的抽象,比如对数据库的一组操作,要么全部成功,要么全部失败.事务具有4个特性:Atomicity(原子性),Consistency(一致性),Isolation(隔离性),Dura ...
自动组卷系统C语言,模块化思想在试题库组卷系统中的应用--以C语言程序设计课程为例 (1).pdf...
2014年6月伊犁师范学院学报 (自然科学版) Jun．2014 第 8卷第 2期 JournalofYiliNormalUniversity(NaturalScienceEdition) V0| ...
Yog2 中的模块化思想
前面我们学习了 FIS3 前端工程构建工具 FIS3,它为前端工程构建提供了有力的支持.在 App 开发中模块化非常流行,今天我们看看前端是如何做到模块化开发的.我们通过 Yog2 (发音 yang ...
编程思想之c语言课程设计--管理系统例子
文章目录前言思路--用计算机"模拟世界" c语言数据结构算法总结例子--学生管理系统(控制台) 考虑需求分析 1.提供菜单 2.接收命令 3.添加学生信息 4.打印 ...

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

模块化思想重写之前写的My97DatePicker的例子相关推荐

最新文章

热门文章