DOJO学习笔记(七)-日期控件DropdownDatePicker和DatePicker

来源:互联网 发布:百度的石榴算法 编辑:程序博客网 时间:2024/05/01 11:12
    这是两个封装良好的日历组件,用来给用户提供方便的日历选择方式。

以较为复杂的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组件所做的一个封装,更适合使用在表单输入的环境中。
原创粉丝点击