DOJO学习笔记（七）－日期控件DropdownDatePicker和DatePicker

这是两个封装良好的日历组件，用来给用户提供方便的日历选择方式。

以较为复杂的DropdownDatePicker为例，首先在页面中require进来这个组件：
<script type="text/javascript">
<!--
dojo.require("dojo.widget.DropdownDatePicker");
//-->
</script>
然后在页面中加入：
<div inputName="startDate" dojoType="dropdowndatepicker" dateFormat="%Y-%m-%d" weekStartsOn="1" adjustWeeks="true"/>
或
<div inputName="endDate" dojoType="dropdowndatepicker" dateFormat="%Y-%m-%d" weekStartsOn="1" adjustWeeks="true"/>
Dojo就会自动生成两个日历组件，一个用来选择开始日期，一个用来选择结束日期。

其 中的属性dojoType指明widget的类型（全部小写就可以了）。inputName就是生成的input字段的name，提交时候作为表单的一个 参数。dateFormat是日期的格式。weekStartsOn是日历中显示的一周以哪一天开始，这里是以周一开始（0-6，0代表周日）。 adjustWeeks指明是否需要根据每个月的实际天数来调整日历中每月显示的天数（如果不调整，每个月除了自己的天数，还会多出一些相邻月份的天数， 总的天数固定为42天）。
如果需要给日期设置一个初始值，可以添加value属性，例如value="2006-10-25"。

以下的例子将组件的setDate事件（就是组件的setDate方法被调用）与外部某个回调函数关联起来：
html这样声明：
<div id="foo" inputName="startDate" dojoType="dropdowndatepicker" dateFormat="%Y-%m-%d" weekStartsOn="1" adjustWeeks="true"/>

Javas cript这样写：
<script type="text/javas cript">
<!--
function test(rfcDate){
  alert(rfcDate);
}
dojo.event.connect( dojo.widget.byId("foo").datePicker, "setDate", test);
//-->
</script>
当选择了日期，要将日期设置到input字段中时，会调用test回调函数。

DatePicker组件的用法类似，DropdownDatePicker实际上是对DatePicker组件所做的一个封装，更适合使用在表单输入的环境中。