Dojo Dijit DateTextBox 使用实践（2）

look_w

DateTextBox 客户端如何解析日期日期通常被当做文本字符串处理，这样就有不同的表达方式，比如 5/8/2016，在英国指 2016 年 8 月 5 日，而美国指 2016 年 5 月 8 日。Dojo 对本地化有很好的支持，对于不同国家的用户会自动完成日期的解析。
dojo.date.locale 就是被用来处理根据用户自定义的 locale 作为用户默认的语言环境，如果用户不明确指定，dojo 会根据浏览器的 locale 对这个属性赋值。和 Java 不同，目前在 dojo 中 locale 并没有对应对象，只是一个 String 对象，典型的格式应该是"zh-CN"。注意 dojo 用的是 "-" , 而不是 Java 中的 "_"。例如对于 5/8/2016，当获取到的 locale 是 en-US 的时候，就被解析为 2016 年 5 月 8 日；当获取到的 locale 是 en-UK 的时候，就被解析为 2016 年 8 月 5 日。
DateTextBox 服务器端如何解析日期另外一个问题就是我们的应用程序可能会和不同地区的各类用户进行交互，但是往往只有一个服务器端，比如我们的控件上标识的属性值为 5/8/2016，对于字符串 5/8/2016，DateTextBox 如何知道这个日期代表的含义呢？为了避免歧义，当与 JavaScript 域之外进行通信时，DateTextBox 采用 ISO8601/RFC3339 的格式 yyyy- MM-dd 或者 yyyy-MM 或者 yyyy 来描述日期，这种格式对于文化习惯引起的格式惯例和时区都无偏向性。例如：2007-12-25 表示 2007 年 12 月 25 日。ISO 格式的日期值能够正确的按照字符串排序，而且比 JavaScript 的日期对象要轻量的多，因此使得其更方便用于编程。
理想情况下，服务器端的日期格式遵循 ISO 标准，但是实际上服务器端的数据往往并不是 ISO 标准日期。比如我们的后台数据库是 Oracle 数据库的时候，默认情况下 Oracle 用 dd-MM-yyyy 格式（ISO 格式 yyyy-MM-dd)。这种情况可以通过创建自定义 widget 实现接受来自服务器端的日期格式，并且在客户端自动转换为用户所在国家文化习惯的日期格式。这个功能主要通过 DateTextBox 的 get("value"）和 set("value",value) 来实现的。
DateTextBox.get("value")：返回一个 javaScript Date 对象，可以利用 dojo.locale.format() 方法将取到的日期类型按照指定的格式转换成为字符串返回给服务器端。
DateTextBox.set("value",value)：接受一个 javaScript Date 对象，然后利用 dojo.locale.parse() 方法将来自服务器端的带日期的字符串格式化成为当前用户所在国家的日期类型。清单 1 是使用实例：
清单 1. DateTextBox 中 get("value") 和 set("value"，value) 的使用

1 2 3 4 5 6 7 8 9

serverFormat: { selector: 'date', datePattern: 'dd-MM-yyyy', //服务器端是 oracle 日期格式 locale: 'en-us' },    valueToSendToServer = dojo.date.locale.format(this.dateTextBox.get("value"),serverFormat); valueToDisplayToClient = this.dateTextBox.set("value", dojo.date.locale.parse(valueFromServer, serverFormat));

清单 2 是一个 DateTextBox 服务器端发送/接收非 ISO 标准日期格式的例子
清单 2. 服务器发送/接收的其它日期格式

1 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

require(["dojo/_base/declare", "dijit/form/DateTextBox",                       "dojo/date/locale", "dojo/dom", "dojo/domReady!"], function(declare, DateTextBox, locale, dom){ declare("OracleDateTextBox", DateTextBox, { oracleFormat: { selector: 'date', datePattern: 'dd-MMM-yyyy', locale: 'en-us' }, value: "",    postMixInProperties: function(){ // 将字符串类型转换为日期类型的对象 this.inherited(arguments); // convert value to Date object this.value = locale.parse(this.value, this.oracleFormat); },    // 覆写 serialize 方法，将日期类型的对象转换成字符串类型写会到服务器端： serialize: function(dateObject, options){ return locale.format(dateObject, this.oracleFormat).toUpperCase(); } });    //从服务器端获取日期并且显示出来 function showServerValue(){ dom.byId('toServerValue').value = document.getElementsByName('oracle')[0].value; } new OracleDateTextBox({ value: "21-JUN-2016", name: "oracle", onChange: function(v){ setTimeout(showServerValue, 0)} }, "oracle").startup(); showServerValue(); });