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

前端之家收集整理的这篇文章主要介绍了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组件所做的一个封装,更适合使用在表单输入的环境中。

猜你在找的Dojo相关文章