Flex组件篇：DateChooser

作者佚名技术来源服务器技术浏览发布时间 2012-07-12

日期选取组件用于显示日历和进行某天的选择，使用的是AS中的Date类。
创建DateChooser组件
下面的例子创建了一个日历组件，并且选中日期为2004年12月22号：
1:
2:
3:
4:
5: 我们还可以通过脚本的方式来设置选中日期

	
1:	 
	2:		3:	function	initDC() 
	4:	{	 
	5:	date1.selectedDate=	new	Date	(2004,	12,	12); 
	6:	} 
	7:	]]> 
	8:	 
	9:

DateChooser组件使用了AS的Date类的一些方法
可以使用get和set方法来获取选中的日期值以及设置日期值。下面的例子比较详细的描述了DateChooser组件的使用。
1:
2: 3: function useDate(eventObj)
4: {
5: //Access the Date object from the event object.
6: day.text=eventObj.target.selectedDate.getDay();
7: date.text=eventObj.target.selectedDate.getDate();
8: month.text=eventObj.target.selectedDate.getMonth();
9: year.text=eventObj.target.selectedDate.getFullYear();
10: wholeDate.text=eventObj.target.selectedDate.getFullYear() +
11: ’/’ + (eventObj.target.selectedDate.getMonth()+1) +
12: ’/’ + eventObj.target.selectedDate.getDate();
13: }
14: ]]>
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33: 这个例子通过响应组件的change事件来获取选中的日期信息，相信大家也不难看懂。

禁用某个日期段的选取
假如要禁用周一到周四的日期选择，可以使用

更简单的写法为：
1: 或者

	
1:	 
	2:		3:	function	initDC() 
	4:	{	 
	5:	date1.disabledDays=[1,2,3,4]; 
	6:	} 
	7:	]]> 
	8:	 
	9:

个人觉得第三种方法比较通用，可以对日历进行初始化的设置。
注意：正确的说法应该是禁用第2～5列的日期。

更改星期名称
默认的日历星期名显示为英文，如果要更改成中文名称，可以用：

	
1:	 
	2:	 
	3:	 
	4:	日 
	5:	一 
	6:	二 
	7:	三 
	8:	四 
	9:	五 
10:	六 
11:	 
12:	 
13:

请注意，如果没有其它设置，数组的第一个元素就表示一周的第一天。当然，最简洁的还是AS的实现方法，而且更加灵活。
1: 2: date1.dayNames=[’日’, ’一’, ’二’, ’三’, ’四’, ’五’, ’六’];
3: //把周一作为每周的第一天
4: date1.myDC.firstDayOfWeek = 1;
5: //设置日历头部样式为绿色
6: date1.setStyle(’headerColor’, 0x00ff00);
7: //设置字体样式为斜体
8: date1.setStyle(’fontStyle’, ’italic’);
9: //设置日历的选择范围2004.1.1～2004.12.23
10: date1.selectableRange =
11: { rangeStart: new Date(2004,1,1), rangeEnd: new Date(2004,12,23) }; DateChooser组件的常用属性和事件还有 01 :
02 : dayNames //星期的名称显示
03 : disabledDays //不可用的星期
04 : disabledRanges //不可用的日期范围
05 : displayedMonth //当前显示的月份
06 : displayedYear //当前显示的年份
07 : firstDayOfWeek //每周的第一天( 0～6 0表示dayNames中的第一个元素，依次类推 )
08 : headerStyle //头部样式
09 : todayStyle //今天的样式
10 : weekDayStyle //周末的样式
11 : monthNames //月份的名称显示
12 : selectableRange //可以选择的日期范围由rangeStart 和 rangeEnd 指定
13 : selectedDate //选中的日期
14 : showToday //是否高亮显示今天的日期
15 :
16 : change //选中日期的事件响应
17 : scroll //移动的事件响应通过对这些属性的设置你可以定义更强大的日历组件了。关键词：组件

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 继续表达式求值—支持函数下一篇: 遮照应用又一酷效

关于Flex组件篇：DateChooser的所有评论

随机推荐