BITimE // 咀嚼时光

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

1. 在新增调查时，该调查的开始日期默认为今天，而结束日期则不能选择成今天之前的日期；
2. 当用户修改开始日期时，将判断当前用户设定的结束日期，如果结束日期在修改后的开始日期之后，则不修改结束日期，而如果结束日期变成了在修改后的开始日期之前时，则修改结束日期，和开始日期为同一天，并且设定用户不能选择开始日期之前的日期为结束日期；
3. 修改结束日期时，不能选择开始日期之前的日期。

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


针对第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代码：

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

• value设置为today则会默认带出今天的日期
• displayFormat设置时间显示格式（便于后台程序转换成timestamp导入DB）
• onValueChanged则设置了触发名为checkEndDate的自定义Javascript函数

再看看Javascript代码片断：

JAVASCRIPT代码：

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