Flex元件篇：DateChooser

梧桐雨—168發表於2008-03-05
Flex元件
日期選取元件用於顯示日曆和進行某天的選擇，使用的是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:
2:
3:
4: 1
5: 2
6: 3
7: 4
8:
9:
10:
更簡單的寫法為：
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 //移動的事件響應
通過對這些屬性的設定你可以定義更強大的日曆元件了。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/13270562/viewspace-200412/，如需轉載，請註明出處，否則將追究法律責任。

相關文章