DOJO学习笔记(七)-日期控件DropdownDatePicker和DatePicker
2007-07-23 16:34
477 查看
这是两个封装良好的日历组件,用来给用户提供方便的日历选择方式。
以较为复杂的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组件所做的一个封装,更适合使用在表单输入的环境中。
以较为复杂的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学习笔记(七)-日期控件DropdownDatePicker和DatePicker
- 日期控件DropdownDatePicker和DatePicker
- jQuery Datepicker 日期控件 用法
- Android开发之四(十一):常用控件之日期设置(DatePickerDialog)
- 日期控件(DatePicker)
- 分享一个很好用的 日期选择控件datepicker 使用方法分享
- bootstrap 模态框日期控件datepicker被遮住问题的解决
- datePicker时间控件最大日期、最小日期设置
- DatePicker TimePicker---日期时间控件
- Kendo Ui 中日期控件DatePicker显示格式更改
- Android 控件之九:DatePicker日期选择控件 DatePickerDialog日期选择对话框
- jquery datepicker 点击日期控件不会自动更新input的值
- android 时间日期控件的使用(DatePicker、TimePicker、DatePickerDialog、TimePickerDialog、AnalogClock、DigitalClock)
- 日期控件jeDate和bootstrap datepicker
- bootstrap 模态框日期控件datepicker被遮住问题的解决
- Android UI控件系列:DatePicker,TimePicker(日期和时间选择)
- 日期控件NoDayDatePicker只显示年月不显示日 兼容5.0以上的方法
- UWP 使用日期选择控件DatePicker时的注意事项
- 当日期有默认值时,My97 DatePicker日期控件实现日期文本输入框必填而无需验证控件支持
- 可空与可绑定数据源的日期编辑选择控件 TDateEditPicker