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组件所做的一个封装，更适合使用在表单输入的环境中。