电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: Dojo Dijit DateTextBox 使用实践（1） [打印本页]

作者: look_w 时间: 2018-11-18 19:12 标题: Dojo Dijit DateTextBox 使用实践（1）

Dojo DateTextBox 简介Dojo 是一个开源的基于 JavaScript 的 Web 界面开发框架，它对常用对象进行了包装并提供一系列 widgets 来简化用户界面的开发。Dojo 的一个重要特性就是提供了良好的本地化支持机制。包括时间/日期格式的本地化和使用不同的日历。Dojo 提供了一系列的支持本地化的输入型 Widgets，其中包括：ValidationTextBox，CurrencyTextBox，NumberTextBox，DateTextBox，TimeTextBox，这些 TextBox 本身就可以自动完成货币，数字，日期时间等的格式的本地化，但是在实际项目中会遇到一些新的问题，以及需要自定义一些 widget。
DateTextBox 就是一个允许用户输入和日历选择的易于使用的日期小控件。DateTextBox 控件有一些自己的属性可以设置，表 1 和表 2 列出了 DateTextBox 常用的一些属性和方法的介绍及实例。
表 1. DateTextBox 常用属性属性描述例子 constraints
用户自定义的参数集合
this.DateTextBox.set("constraints", {
selector: "date",
datePattern: "dd/MM/y",
locale: "fr-fr"
});
lang
设置用户语言环境，覆盖默认的 dojo locale
this.DateTextBox.set("lang", dojo.config.culturalLocale);
// dojo.config.culturalLocale 是获取到的浏览器 locale
required
是否允许为空，true：不允许为空；false：允许为空
This.DateTextBox.set("required",true);
value
对应 HTML<input>元素的属性
This.DateTextBox.set("value", new Date());
displayedValue
实时显示出来的值
this. DateTextBox.get("displayedValue")
domNode
DateTextBox 规范的顶级节点
dojo.addClass(this.DateTextBox.domNode, "ls-inputError");

表 2. DateTextBox 常用方法方法描述例子 postMixInProperties()
在控件的 DOM 对象创建前对 Widget 的变量进行处理，可以在子类中覆写这个方法；
postMixInProperties: function () {
this.valueLabel = dojo.i18n.getLocalization(""g11n.messages"", " CommonResources", "zh-CN");
postCreate()
覆写初始化函数，大部分可以初始化操作可以在这处理，如绑定事件和设置 CSS 属性。
postCreate: function(){
this.DateTextBox.set("constraints", 'dd-MM-yyyy');
this. DateTextBox.set("lang","zh-CN");
}
_getValueAttr()
从文本框中获取日期信息
_getValueAttr: function() {
return this. DateTextBox.get("value");
}
_setValueAttr(value, priorityChange, formattedValue)
设置这个文本框的日期。设置的值可以是 JavaScript 日期或要解析的字符串。
_getValueAttr：function(value){
this. DateTextBox.set("value", dojo.date.locale.parse(value, {selector: "date",
datePattern: formattedValue, locale: "en-us"))
}
loadAndOpenDropDown()
使得 DateTextBox 获得鼠标焦点
popupCalendar: function() {
this.dateTextBox.focus(); this.dateTextBox.loadAndOpenDropDown();
}
displayMessage(message)
这是一个重写的方法，用来显示验证错误和提示信息，默认情况下使用 tooltip 显示提示信息
this.DateTextBox.displayMessage = dojo.h

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)