如何使用Dojo的DatePicker控件制作联动日期选择器

在开发系统的调查功能时，需要设计一个可以联动的开始日期/结束日期选择器用来设定用户的调查的起始/结束日期。对于这个联动的日期选择器，我们的设计要求是这样的：

在新增调查时，该调查的开始日期默认为今天，而结束日期则不能选择成今天之前的日期；

当用户修改开始日期时，将判断当前用户设定的结束日期，如果结束日期在修改后的开始日期之后，则不修改结束日期，而如果结束日期变成了在修改后的开始日期之前时，则修改结束日期，和开始日期为同一天，并且设定用户不能选择开始日期之前的日期为结束日期；

修改结束日期时，不能选择开始日期之前的日期。

针对这样的要求，决定使用dojo的日期选择控件 DatePicker / DropDownDatePicker 来实现。

P_1167283844_0.JPG

最终的效果，联动的DatePicker，注意20日之前的日期都是不能选择的

针 对第1和第3点要求，dojo的 DatePicker / DropDownDatePicker 可以轻易的实现，可以通过设置 DatePicker / DropDownDatePicker 的 value 和startDate这两个属性实现。而要这个需求的难点在于两个DatePicker之间的联动，也就是说，要动态的根据第一个DatePicker的 值来设定第二个DatePicker的startDate属性。但是不幸的是，dojo没有提供直接的动态修改 DatePicker 的 startDate / endDate 的方法。虽然我们可以随时修改DatePicker的startDate属性，但是，在UI（日期选择界面）却不会发生变化，达不到我们想要的效果。

dojo提供了一个onValueChanged的事件，我们可以为第一个DatePicker添加这个事件的触发器，触发后调用我们自己写的 Javascript函数。而在这个函数里我们要解决的问题就只有修改第二个DatePicker的startDate属性（这个很简单），并让UI即时 生效（问题就在这里）了。

在仔细研究了dojo的DatePicker的源代码后发现，startDate仅仅是这个 DatePicker控件的一个单纯的属性，修改它并不会在内部触发任何改动UI的事件。所以，我们要做的就变得很简单了——想办法重绘UI就可以。不幸 中的万幸是，我们找到了_preInitUI()这个内部的方法，它可以绘制DatePicker的UI。

一切明朗后，就变得很简单了。看看代码片断吧，很轻松的实现了两个DatePicker / DropDownDatePicker控件的联动。

HTML4STRICT代码：

开始时间：<input dojoType="dropdowndatepicker" id="startdate" name="start" value="today" displayFormat="yyyy-MM-dd" onValueChanged="checkEndDate" />

结束时间：<input dojoType="dropdowndatepicker" id="enddate" name="end" displayFormat="yyyy-MM-dd" />

注意看上面HTML代码中的第一个DropDownDatePicker控件的属性：

value设置为today则会默认带出今天的日期

displayFormat设置时间显示格式（便于后台程序转换成timestamp导入DB）

onValueChanged则设置了触发名为checkEndDate的自定义Javascript函数

再看看Javascript代码片断：

JAVASCRIPT代码：

function g(id) {

return document.getElementById(id)

}

function w(id) {

return dojo.widget.getWidgetById(id)

}

function checkEndDate(){

var func=function(){

//得到新的修改后的开始日期和当前的结束日期

starttime=w('startdate').getDate()

endtime=w('enddate').getDate()

//开始日期是否在结束日期之后？

if (starttime>endtime) {

//开始日期在结束日期之后，修改结束日期等于开始日期

w('enddate').setDate(starttime)//时间戳

w('enddate').value=w('startdate').inputNode.value//字符串值

}

//设定结束日期的startDate属性，限制用户选择开始日期之前的日期

var startDate=dojo.date.fromRfc3339(w('startdate').inputNode.value).setHours(0,0,0,0)

w('enddate').startDate=w('startdate').inputNode.value

w('enddate').datePicker.startDate=startDate

//得到结束日期的当前月份

var d = new Date(w('enddate').datePicker.curMonth)

//利用_preInitUI()重绘结束日期的UI（当前月）

w('enddate').datePicker._preInitUI(d,false,true)

}

//延时500毫秒执行

window.setTimeout(func,500)

}

怎 么样，很简单吧？不过你也许要问，为什么要延时500毫秒执行呢？原因是这样的，一开始浏览器在绘制页面的时候，设定开始日期为今天，这一动作同样会触发 onValueChanged事件。但这时候，因为结束日期的DatePicker控件还未被浏览器绘制完成，所以导致触发onValueChanged 事件后，Javascript无法执行成功，根本get不到enddate这个element。所以，我采取了onValueChanged事件触发后 500毫秒后执行Javascript程序，这时候，再慢的电脑都已经render完这个element了，执行Javascript就不会出错了，而且 对于用户，也没什么感觉。当然，你也可以写一个onLoad事件的Javascript函数在页面加载完成后再给startdate这个element赋 值。这都是问题的解决办法，怎么使用完全取决于你。

可以 *** 作单个节点dijit/Tree._TreeNode，也可以对整个树 *** 作。

具体的可以参见dojo的官方文档，写的很详细的。http://dojotoolkit.org/api/

点开dijit---Tree。右侧出现的文档里点开

Event Summary

各种事件都有

还有Method Summary

里面树的各种方法也有。

靠上边的部分有See the dijit/Tree reference documentation for more information.。

点开可以看详细的示例。也就是这个http://dojotoolkit.org/reference-guide/1.9/dijit/Tree.html

都写的非常详细，看过文档基本不用参照其它文章

顺便说一下，如果有的浏览器跑不起来网站上的示例程序的话，可以换个浏览器试试

模块（module） —— 一个经过封装的JavaScript文件，它遵循模块的格式，指定依赖和提供模块输出。

模块标识（module ID）——唯一标识模块的字符串,相对模块标识将根据当前模块的标识解释为绝对模块标识

模块路径 （module path）——用于检索模块的URL。一个模块标识对应于一个模块路径，该路径是由加载器配置规则设定的（缺省情况下，模块路径假定为该模块对于根路径的相对路径，根路径通常是模块加载器包所在的父目录）。

模块加载器（module loader）——解析和加载模块以及相关依赖的JavaScript代码，它与插件交互，并处理加载配置。

包（package）——一组模块集合。例如dojo,dijit以及dgrid都是包。

构建器（builder）——用于将模块（或者多个模块）以及其依赖连接在一起产生单个JavaScript文件的工具，这样使得一个应用程序能够包含多个模块，并能创建多个构建层次，从而使得它们在被加载时实现HTTP请求数目最小化。

层（layer）——一个文件，它包含若干模块并由构建器优化生成单个文件。

依赖（dependency）——为了使另一个模块正常工作而必须加载的模块。

AMD——异步模块定义，一种为浏览器开发提供最优体验的模块定义格式。

工厂方法（factory）——通过define定义的并提供给模块加载器的函数，它在所有依赖加载完后执行一次。

使用AMD

最基础的AMD API是define()方法，用于定义一个模块及其依赖。通常我们这样来写一个模块：

dependencyIds 参数是一个字符串数组，用于表示需要加载的依赖模块。这些依赖模块将会被加载和执行。一旦所有依赖都被执行完毕，它们的输出将作为参数提供给回调函数（define()方法的第二个参数）

为了展示AMD的基础用法，我们可以定义一个使用dojo/query（css选择器查询）和dojo/on（事件处理）的模块。

一旦dojo/query和dojo/on被加载（当然也必须等到它们本事的依赖也被加载，以此类推）， 回调函数将被调用，同时dojo/query的输出（一个负责CSS选择器查询的函数）作为参数query，dojo/on的输出（一个可以添加事件监听器的函数）作为参数on被传到这个回调函数中。回调函数（通常认为是模块的工厂方法）被保证只调用一次。

列在依赖集合中的每个模块标识是一个抽象的模块路径。说它是抽象的因为它被模块加载器转移成真正的URL。正如你所见，模块路径并不需要包含“.js”后缀，这个后缀在加载的时候会自动添加。当模块标识直接由模块名打头时，该名称是模块的绝对标识。相比之下，我们也可以通过由“./”或者"../"打头表示当前目录或者父目录来指定相对标识。这些相对标识会通过标准路径解析规则来解析成绝对标识。你可以定义一个模块路径规则来决定这些模块路径将如何转换成URL。缺省情况下，模块根目录定义为相对于模块加载器包的父目录的路径。例如，如果我们用下面的方法加载Dojo（注意在这里我们设置async属性为true来保证异步AMD加载）

---