创建一个可复用的日期选择小控件当我们想以编程方式打开日历，例如鼠标点击日历图标的时候，弹出日历选择控件，当鼠标焦点离开日历图标的时候，自动关闭日历。另外当用户输入格式不正确的时候，提供一些提示和警告信息，这时候我们就需要定制自己的 DateTextBox 控件。下面详细介绍了如何创建一个定制的可复用的 DateTextBox 小控件。
步骤 1： 创建一个 css 样式文件，如 myDateTextBox.css
清单 3 是 css 文件的一个片段，定义 Calendar 图标的样式。
清单 3. myDateTextBox.css 模板文件片段1
2
3
4
5
6
7
8
9
10
11
12
| .calendarIcon {
display: block;
width: 24px;
height: 22px;
background: url("/images/calendar-icon.png") no-repeat 0 0 transparent;
cursor: pointer;
margin-left: 5px;
}
.calendarIcon:hover {
background-position: 10 0;
}
|
步骤 2： 创建模板文件 myDateTextBox.html
使用 dojoAttachPoint 属性定义 DOM 对象的唯一 ID，如清单 4 所示的实例。
清单 4. myDateTextBox.html 模板文件1
2
3
4
5
| <div class="myDateTextBox">
<div dojoAttachPoint="dateTextField" dojoType="dijit/form/DateTextBox"></div>
<div dojoAttachEvent="onclick:popupCalendar" class="calendarIcon"></div>
<div dojoAttachPoint="inputFormat" class="inputFormat"></div>
</div>
|
步骤 3：创建 js 文件，MyDateTextBox.js
通过使用 declare 可以很容易创建我们自己定制的 Dojo 小控件，创建步骤包括：
第一步：引用 Dojo 工具包和定义类，继承 dijit._Contained，dijit._Widget，dijit._Templated 和 dijit.form.DateTextBox，如清单 5 所示。
清单 5. 引用 Dojo 工具包1
2
3
4
5
6
7
8
9
10
11
| define([
"dojo/_base/declare",
"dojo/_base/config",
"dojo/_base/lang",
"dojo/date/locale",
"dojo/dom-class",
"dijit/_Contained",
"dijit/_WidgetBase",
"dijit/_TemplateMixin",
"dojo/text!./templates/ MyDateTextBox.html"
],function(declare, config, lang, locale, domClass, contained, widgetBase, templateMixin,template){
|
return declare("common.MyDateTextBox", [contained, widgetBase, templateMixin],{
第二步： js 文件的主体部分。
包括定义成员变量及初始化，定义初始化函数，覆写构造函数和初始化函数 postCreate，自定义函数等。如清单 6 所示。
清单 6. myDateTextBox.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| define([
"dojo/_base/declare",
"dojo/_base/config",
"dojo/_base/lang",
"dojo/date/locale",
"dojo/dom-class",
"dijit/_Contained",
"dijit/_WidgetBase",
"dijit/_TemplateMixin",
"dojo/text!./templates/ MyDateTextBox.html"
],function(declare, config, lang, locale, domClass, contained, widgetBase, templateMixin,template){
return declare("common.MyDateTextBox", [contained, widgetBase,
templateMixin],{
templatePath: template,
dateTextField: null, // DateTextBox widget
serverDatePattern: 'dd-MM-yyyy',
errorNode: null,
serverFormat: {
selector: 'date',
datePattern: 'dd-MM-yyyy', //服务器端是 oracle 日期格式
locale: 'en-us'
},
postCreate: function() {
this.dateTextField.set("constraints",
{
selector: "date",
formatLength: "short")
};
this.dateTextField.set("lang", config.locale);
this.dateTextField.set("required", true);
this.dateTextField.displayMessage = lang.hitch(this, function(message) {
if (message) {
this.setError();
} else {
this.removeError();
}
});
},
popupCalendar: function() {
this.dateTextField.focus();
this.dateTextField.loadAndOpenDropDown();
},
setValue: function(value) {
this.dateTextField.set("value", locale.parse(value, this.serverFormat))
},
getValue: function() {
return locale.format(this.dateTextField.get("value"), this.serverFormat
},
validate: function () {
this.removeError();
if (!this.dateTextField.isValid()) {
this.setError();
return false;
} else {
return true;
}
},
setError: function(serverErrorMessageIgnored) {
this.errorNode.innerHTML = this._datePattern();
domClass.removeClass(this.errorNode, "hidden");
domClass.addClass(this.dateTextField.domNode, "ls-inputError");
},
removeError: function() {
this.errorNode.innerHTML = "";
domClass.addClass(this.errorNode, "hidden");
domClass.removeClass(this.dateTextField.domNode, "ls-inputError");
},
});
|
第三步：在 HTML 或者 JSP 中使用自定义日期控件，如清单 7 所示：
清单 7. 使用自定义的 DateTextBox 控件1
2
3
4
5
6
7
| <td>
<div dojoAttachPoint="dateTextField" dojoType="dijit/form/DateTextBox"></div>
</td>
<td>
<div dojoAttachPoint="calendarButton" dojoAttachEvent="onclick:popupCalendar"
class="calendarIcon"></div>
</td>
|
dojo.date.locale 与 ICU4J 区别1. dojo.date.locale 使用横线 '-'作为 locale 的分隔符，Java 使用下划线'_'作为分隔符。
2. Dojo.locale.parse，Dojo.locale.format 和 Dojo.digit.DateTextBox 不遵循 icu4j 规范。无论哪个区域，Dojo 都是以四位数表示日期，如果强制使用两位数表示日期，将 constraints 中的 fullYear (boolean) 设置为 false。 |
