这是两个封装良好的日历组件,用来给用户提供方便的日历选择方式。
以较为复杂的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组件所做的一个封装,更适合使用在表单输入的环境中。