shatuo
- 浏览: 26050 次
- 性别:
- 来自: 铁力
-
文章分类
最新评论
改造dojo 日期控件
if (!dojo._hasResource["bad.form.DateBox"]) { //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["bad.form.DateBox"] = true;
dojo.provide("bad.form.DateBox");
dojo.require("dijit._Calendar");
dojo.require("dijit.form.TimeTextBox");
dojo.require("bad.form._MonthPicker");
dojo.require("dojo.date.locale");
dojo.declare("bad.form.DateBox", [dijit.form.TimeTextBox], {
/** @attr: 弹出窗口类型 */
_popupClass: "dijit._Calendar",
/** @attr: {String}日期类型
* @example yyyy_MM_dd 其中MM要大写
*/
datePattern: "",
/** {String } */
_pattern: "",
/**@attr: 年的开始位*/
_yearStart:"",
/**@attr: 年的结束位*/
_yearEnd:"",
/**@attr: 月的开始位*/
_monthStart:"",
/**@attr: 月的结束位*/
_monthEnd:"",
/**@attr: 日的开始位*/
_dateStart:"",
/**@attr: 日的结束位*/
_dateEnd:"",
/**@attr: 存储用户提示信息*/
_currentMessage: "请输入正确的日期",
/**@attr: {Boolean} 是否显示day 为{false}时不显示，为{true}时显示 */
showDay: "",
/**@attr: 日期可以显示的初始值*/
firstValue:'',
/**@method将目前this.textbox.value进行格式化*/
formatInput: function()
{
var value=this.getFormatDate();
if(value instanceof Date)
{
this.setValue(value);
}
},
/** 当文本框失去焦点事件*/
_runBlur: function()
{
this.formatInput();
this.onChange(this.textbox.value);
},
/** @method: 将参数或者目前显示的数字格式化，如果显示中数字位数超过6且显示天数，则将字符截取为yyyy（M）M（d）d
* @return: {Date}
* @remind: 可以自己添加返回值，比如判断现有的值无法转化，返回false，等等。
*/
getFormatDate: function(value)
{
if(!value)
{
value = this.textbox.value;
}
if (typeof value == "string")
{
var numValue = "";
value.replace("-", "");
var stringArray = value.split("");
//取得value中的数字
for (var i = 0; (i < stringArray.length && (this.showDay ? numValue.length < 8 : numValue.length < 6)); i++) {
if (!isNaN(stringArray[i])) {
numValue += stringArray[i];
}
}
//如果显示day
if (this.showDay) {
if (numValue.length == 8)
{
return new Date(numValue.slice(this._yearStart, this._yearEnd), numValue.slice(this._monthStart, this._monthEnd) - 1, numValue.slice(this._dateStart, this._dateEnd));
}
if (numValue.length == 7)
{
return new Date(numValue.slice(this._yearStart, this._yearEnd), numValue.slice(this._monthStart, this._monthEnd-1) - 1, numValue.slice(this._dateStart-1, this._dateEnd));
}
if (numValue.length == 6)
{
return new Date(numValue.slice(this._yearStart, this._yearEnd), numValue.slice(this._monthStart,this._monthEnd-1) - 1, numValue.slice(this._dateStart-1, this._dateEnd-1));
}
} else {
if (numValue.length == 6) {
return new Date(numValue.slice(this._yearStart, this._yearEnd), numValue.slice(this._monthStart, this._monthEnd) - 1);
}
if (numValue.length == 5) {
return new Date(numValue.slice(this._yearStart, this._yearEnd), numValue.slice(this._monthStart,this._monthEnd-1) - 1);
}
}
}
},
/**@member: 扫描datePattern，获得年月(日)的位置*/
scanPattern: function()
{
this._pattern="";
for(var i=0;i<this.datePattern.length;i++)
{
switch(this.datePattern.charAt(i))
{
case 'd':
while(this.datePattern.charAt(i)=='d')
{
this._pattern+='d';
i++;
}
i--;
break;
case 'D':
while(this.datePattern.charAt(i)=='D')
{
this._pattern+='d';
i++;
}
i--;
break;
case 'M':
while(this.datePattern.charAt(i)=='M')
{
this._pattern+='M';
i++;
}
i--;
break;
case 'y':
while(this.datePattern.charAt(i)=='y')
{
this._pattern+='y';
i++;
}
i--;
break;
case 'Y':
while(this.datePattern.charAt(i)=='Y')
{
this._pattern+='y';
i++;
}
i--;
break;
default : break; //暂时不进行处理
}
}
for(var i=0;i<this._pattern.length;i++)
{
switch(this._pattern.charAt(i))
{
case 'd':
this._dateStart=i;
while(this._pattern.charAt(i)=='d')
{
i++;
}
this._dateEnd=i;
i--;
break;
case 'M':
this._monthStart=i;
while(this._pattern.charAt(i)=='M')
{
i++;
}
this._monthEnd=i;
i--;
break;
case 'y':
this._yearStart=i;
while(this._pattern.charAt(i)=='y')
{
i++;
}
this._yearEnd=i;
i--;
break;
default : break; //暂时不进行处理
}
}
console.log(this.datePattern+" "+this._yearStart+" "+this._yearEnd+" "+this._monthStart+" "+this._monthEnd+" "+this._dateStart+" "+this._dateEnd);
},
_setPattern: function()
{
/*
this._pattern="";
var size=this._yearEnd>this._monthEnd?(this._yearEnd>this._dateEnd? this._yearEnd:this._dateEnd):(this._monthEnd>this.dateEnd? this._monthEnd:this._dateEnd);
console.log("length is "+size);
for(var i=0;i<size;i++)
{
if(i>=this._yearStart&&i<this._yearEnd)
{
while(i<this._yearEnd)
{
this._pattern+="y";
i++;
}
i--;
}
else
if(i>=this._monthStart&&i<this._monthEnd)
{
while(i<this._monthEnd)
{
this._pattern+="M";
i++;
}
i--;
}
else
if(i>=this._dateStart&&i<this._dateEnd)
{
while(i<this._dateEnd)
{
this._pattern+="d";
i++;
}
i--;
}
}
*/
console.log("pattern is "+this._pattern);
},
/**被绑定的onkeydown事件，火狐下回车事件有问题
* */
_onkeydown: function(key)
{
var c = String.fromCharCode(65);
var code=this._getKeyCode(key);
if(code==13)
{
var value=this.getFormatDate();
if(value instanceof Date)
{
var isie = (document.all) ? true : false;
var eSrc =isie?key.srcElement:key.target;
if(eSrc.tagName=="INPUT" && (eSrc.type=="text"||eSrc.type=="password"))
{
if(isie)
{
key.keyCode=9;
}
else
{
key.which=9;
}
if(this._opened)
{
this._close();
}
}
}
}
return true;
},
_getKeyCode: function(e){
var isie = (document.all) ? true : false;
var key="";
if (isie)
{
key = e.keyCode;
}
else
{
key = e.which;
if (key == 120 || key == 228||key == 99 ||key == 0)
{
key = 8;
}
}
return key;
},
/** @method: 过滤字符加捕获回车*/
keycodefilter: function(key){
if (key.keyCode == dojo.keys.ENTER)
{
this.formatInput();
this.onChange();
}
if(key.keyCode==dojo.keys.ESCAPE)
{
if(this._opened)
{
this._close();
}
}
},
/** @method: 验证，目前继承父类的验证方法*/
validate: function(){
this.inherited('validate', arguments);
},
/** @method: 配置属性，继承父类的同名方法，目前主要是完成 this.datePattern默认配置将其配置为"yyyy-MM-dd"
*/
postMixInProperties: function()
{
this.inherited('postMixInProperties', arguments);
this.constraints.selector = 'date';
this.datePattern=this.datePattern? this.datePattern:"yyyy-MM-dd";
this.showDay = (this.datePattern.indexOf("dd") != -1 || this.datePattern.indexOf("DD") != -1) ? true : false; //是否显示day
this.constraints.datePattern = this.datePattern;
if(!this.showDay)
{
this._popupClass="bad.form._MonthPicker";
}
this.maxLength=this.datePattern.length; //输入长度不能超过验证长度
this.promptMessage="请输入形如"+this.datePattern;
this.invalidMessage="请输入形如"+this.datePattern;
},
/** @method: 继承父类同名方法，扫描格式，添加两个事件绑定，一个是键盘输入字符过滤，另一个是失去焦点对字符串进行格式化 如果有初值赋上初值*/
postCreate: function(){
this.inherited('postCreate', arguments);
this.scanPattern();
this._setPattern();
dojo.connect(this.textbox, "onkeypress", this, this.keycodefilter); //绑定onkeypress事件
dojo.connect(this.textbox,"onkeydown",this,this._onkeydown);
dojo.connect(this, "_onBlur", this, this._runBlur); //绑定失去焦点事件和字符格式化方法
this._lastValue=" ";
if(this.firstValue)
{
this.setValue(this.firstValue); //赋上初值
}
},
_onMouserOver: function(evt){
this.displayMessage(this._currentMessage);
},
_onMouserOut: function(evt){
dijit.hideTooltip(this.domNode);
},
/** @method: 验证，目前继承父类的验证方法
* @param: {Date}newValue
* */
onChange: function(newValue)
{
this._lastValue=this.getValue();
this.inherited('onChange', arguments);
},
/** @method: 将目前的显示值经过格式化返回 表单进行数据绑定会调用此方法获取当前值
@return: {Sring} 被格式化的值
*/
getValue: function()
{
if(!this.textbox.value)
{
return "";
}
return this.textbox.value;
},
/** @method: 对this.textbox赋值 参数可以是Date对象或者String 若果能转换为Date对象，则显示值改变
* @param: {String}value or {Date}value
* @return: {null}
*/
setValue: function(value)
{
//以下为没有弹出窗口对象时，新建一个弹出窗口对象并进行赋值防止出现NaN的情况
if(!this._picker)
{
this._open();
this._close();
}
var v = [];
if (value instanceof Date)
{
v[0] = value;
}
else if (typeof value == "string")
{
if(value.length==0)
{
this.textbox.value="";
return;
}
else
if (value.length >= 6)
{
//setValue的类型为Date对象方能成功
v[0]=new Date();
v[0]=this.getFormatDate(value);
}
}
console.log("v[0] is "+v[0]);
console.log(v[0] instanceof Date&&v[0].getFullYear());
this.inherited("setValue", arguments, v);
if(v[0] instanceof Date&&v[0].getFullYear())
{
//var testValue=dojo.date.locale.format(v[0],this._pattern);
if(this._lastValue!=this.textbox.value)
{
this._lastValue=this.textbox.value;
console.log("_lastValue is "+this._lastValue);
}
}
}
});
}
原先改写了下dojo的日期控件，没太用心，做个反面例子。
代码如下，上级文件夹“包”叫bad.form，具体对象名字为“DateBox”
bad.form.DateBox
属性
|
属性名 |
类型 |
默认值 |
描述 |
|
Id |
String |
无 |
组件标识 |
|
jsId |
String |
无 |
通过jsId可以获得控件对象 |
|
_popupClass |
String |
"dijit._Calendar" |
弹出窗口类型 |
|
datePattern |
String |
“yyyy-MM-dd” |
设置日期格式 |
|
dateValue |
Date |
new Date()即此时此刻 |
日期值 |
备注
目前_popupClass可选类型为"dijit._Calendar"和”bad.form._MonthPicker”两种，前一种完整显示年月日，后一种只显示年月。
datePattern设置日期验证的格式以及正确日期的显示格式以及按回车键对现有字符串中数字进行格式化的格式。可以设为”*yyyy*MM*dd*”或者”*yyyy*MM*”其中*可以代表除英文字符以外的任意字符串，MM必须要大写，如果datePattern为”*yyyy*MM*”，则_popupClass会变为_popupClass。
方法
|
方法名 |
参数 |
返回值 |
描述 |
|
setValue |
{String or Date}value |
无 |
对控件赋值 |
|
getValue |
无 |
String |
获取控件的值 |
|
_open |
无 |
无 |
弹出窗口 |
|
_close |
无 |
无 |
关闭窗口 |
备注
setValue要求参数为Javascript的内置对象Date或者能转化为Date的String（如2000-10-11 00:00:00:0）
getValue默认返回形如"yyyy-MM-dd"的String，此方法可以重写,以需要的格式将值返回。
事件
| 事件名 | 参数 | 返回值 | 描述 |
| onValueChange | {Date}newValue,{Date}oldValue | 无 | 值改变事件 |
分享到：
发表评论
相关推荐
### Dojo控件的使用和入门心得 #### Dojo简介及其优势 Dojo是一个功能强大的JavaScript框架，专门设计用于简化富互联网应用（RIA）的开发。作为一种DHTML Toolkit，Dojo封装了大量的常用功能，旨在提高前端开发...
每个Dojo控件都是一个JavaScript类，通常继承自_Widget或其子类，这些类提供了控件的生命周期管理函数，如构造函数、postCreate等，允许开发者在特定阶段插入自定义逻辑。 以_Dojo基类为例，`preamble`和`...
解决struts2 日期选择器控件乱码问题后的jar包。
Dojo 是一个强大的JavaScript工具库，它为Web开发提供了丰富的功能和组件，涵盖了从DOM操作、事件处理到AJAX通信等多个方面。Dojo的核心在于它的模块化系统，这使得开发者可以按需加载代码，提高应用的性能和可维护...
DOJO学习笔记（七）－日期控件DropdownDatePicker和DatePicker DOJO常用的验证函数 Dojo with Adobe AIR Dojo 工具包教程 Dojo 快速安装 Dojo和JSON建立无限级AJAX动态加载的功能模块树 Dojo学习笔记( 模块与...
DOJO学习笔记（七）－日期控件DropdownDatePicker和DatePicker DOJO常用的验证函数 Dojo with Adobe AIR Dojo 工具包教程 Dojo 快速安装 Dojo和JSON建立无限级AJAX动态加载的功能模块树 Dojo学习笔记( 模块与...
DOJO学习笔记（七）－日期控件DropdownDatePicker和DatePicker DOJO常用的验证函数 Dojo with Adobe AIR Dojo 工具包教程 Dojo 快速安装 Dojo和JSON建立无限级AJAX动态加载的功能模块树 Dojo学习笔记( 模块与...
dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档
dojo js dojo js dojo js dojo js dojo js dojo js dojo js
《dojo中文文档-dojo手册》提供了全面而深入的Dojo框架知识，这是一份非常有价值的资源，对于想要理解和掌握Dojo JavaScript库的开发者来说至关重要。Dojo是一个强大的JavaScript工具包，它提供了丰富的功能，包括...
Dojo 是一个功能丰富的 JavaScript 库，它提供了一系列模块化、面向对象的工具，用于构建高性能的 Web 应用程序。在 Dojo 中，模块和包的概念是核心组成部分，它们帮助开发者组织和管理代码，使其更易于维护和重用。...
不好意思，上一个资源没有改完全！csdn不让删除。只好重新提交一个！注意清除本地浏览器缓存文件！
Dojo是一个非常强大的、面向对象的、开源的JavaScript工具箱，它为开发富客户端Ajax应用提供了一套完整的小部件和一些特效操作。曾经有人这样说：“对于一个Web开发者而言，如果没有Dojo，他将是一个“残废”的...
* dojo.date：日期格式解析的有效助手。 * dojo.event：事件驱动的 API，支持 AOP 开发，以及主题和队列的功能。 * dojo.back：撤销用户操作的栈管理器。 * dojo.rpc：与后端服务进行通信，支持 JSON 语法的 Web ...
8. **工具集**：还包括日期和时间处理、字符串格式化、数组操作等一系列实用工具函数，如`dojo/date`、`dojo/regexp`和`dojo/_base/array`。 在"dojo-release-1.0.2"这个特定版本中，可能包含以下内容： - **源...
手册中列举了一些常用的Dojo包，如dojo.io用于不同类型的IO传输，dojo.dnd提供拖放功能的API，dojo.string提供了字符串处理方法，dojo.date帮助解析和操作日期，dojo.event处理事件驱动和AOP开发，dojo.back管理撤销...
此外，Dojo还有一套完整的UI组件库，如`dijit`，包含了各种常见的表单控件、布局容器和对话框等。这些组件具有良好的可定制性和可访问性，可以快速构建出美观且响应式的用户界面。 在压缩包中的"dojo"文件，很可能...
### Dojo常用方法总结 Dojo是一个开源的JavaScript框架，用于构建高性能的富客户端Web应用程序。它提供了一系列功能强大的工具和API，可以帮助开发者更轻松地处理DOM操作、AJAX调用、用户界面组件构建等任务。本文...
Dojo DataGrid是一个功能丰富的表格控件，它允许用户以表格形式展示大量数据，同时提供排序、筛选、分页等功能。DataGrid可以与各种数据源（如JsonRest、Store等）配合，动态加载和更新数据。 2. **配置DataGrid**...