减小字体
增大字体
日期选取组件用于显示日历和进行某天的选择,使用的是AS中的Date类。 创建DateChooser组件 下面的例子创建了一个日历组件,并且选中日期为2004年12月22号:
1: <?php <mx:DateChooser id=’date1’ > 2: <mx:selectedDate> 3: <mx:Date month=’12’ date=’12’ year=’2004’ /> 4: </mx:selectedDate> 5: </mx:DateChooser> 我们还可以通过脚本的方式来设置选中日期
1: <?php <mx:script> 2: <![CDATA[ 3: function initDC() 4: { 5: date1.selectedDate= new Date (2004, 12, 12); 6: } 7: ]]> 8: </mx:script> 9: <mx:DateChooser id=’date1’ initialize=’initDC();’ /> DateChooser组件使用了AS的Date类的一些方法 可以使用get和set方法来获取选中的日期值以及设置日期值。下面的例子比较详细的描述了DateChooser组件的使用。
1: <?php <mx:script> 2: <![CDATA[ 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: </mx:script> 16: <mx:DateChooser id=’date1’ change=’useDate(event)’ /> 17: <mx:Form> 18: <mx:FormItem label=’Day’ > 19: <mx:TextInput id=’day’ width=’100’ /> 20: </mx:FormItem > 21: <mx:FormItem label=’Day of month’ > 22: <mx:TextInput id=’date’ width=’100’ /> 23: </mx:FormItem > 24: <mx:FormItem label=’Month’ > 25: <mx:TextInput id=’month’ width=’100’ /> 26: </mx:FormItem > 27: <mx:FormItem label=’Year’ > 28: <mx:TextInput id=’year’ width=’100’ /> 29: </mx:FormItem > 30: <mx:FormItem label=’Date’ > 31: <mx:TextInput id=’wholeDate’ width=’300’ /> 32: </mx:FormItem > 33: </mx:Form> 这个例子通过响应组件的change事件来获取选中的日期信息,相信大家也不难看懂。
禁用某个日期段的选取 假如要禁用周一到周四的日期选择,可以使用
1: <?php <mx:DateChooser id=’date1’ > 2: <mx:disabledDays> 3: <mx:Array> 4: <mx:String>1</mx:String> 5: <mx:String>2</mx:String> 6: <mx:String>3</mx:String> 7: <mx:String>4</mx:String> 8: </mx:Array> 9: </mx:disabledDays> 10: </mx:DateChooser> 更简单的写法为:
1: <?php <mx:DateChooser id=’date1’ disabledDays=’[1,2,3,4]’ /> 或者
1: <?php <mx:script> 2: <![CDATA[ 3: function initDC() 4: { 5: date1.disabledDays=[1,2,3,4]; 6: } 7: ]]> 8: </mx:script> 9: <mx:DateChooser id=’date1’ initialize=’initDC();’ /> 个人觉得第三种方法比较通用,可以对日历进行初始化的设置。 注意:正确的说法应该是禁用第2~5列的日期。更改星期名称默认的日历星期名显示为英文,如果要更改成中文名称,可以用:
1: <?php <mx:DateChooser id=’date1’ change=’useDate(event);’ > 2: <mx:dayNames> 3: <mx:Array> 4: <mx:String>日</mx:String> 5: <mx:String>一</mx:String> 6: <mx:String>二</mx:String> 7: <mx:String>三</mx:String> 8: <mx:String>四</mx:String> 9: <mx:String>五</mx:String> 10: <mx:String>六</mx:String> 11: </mx:Array> 12: </mx:dayNames> 13: </mx:DateChooser> 请注意,如果没有其它设置,数组的第一个元素就表示一周的第一天。当然,最简洁的还是AS的实现方法,而且更加灵活。
1: <?php //设置星期显示名称 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 //移动的事件响应 通过对这些属性的设置你可以定义更强大的日历组件了。
将本文收藏到QQ书签与更多好友分享
|