創(chuàng)建DateChooser組件
下面的例子創(chuàng)建了一個(gè)日歷組件,并且選中日期為
2004
年
12
月
22
號:
<
mx
:
DateChooser
?
id
=
'date1'
?
>
2.
<
mx
:
selectedDate
>
3.
<
mx
:
Date
?
month
=
'12'
?
date
=
'12'
?
year
=
'2004'
?
/>
4.
</
mx
:
selectedDate
>
5.
</
mx
:
DateChooser
>
我們還可以通過腳本的方式來設(shè)置選中日期
1.
<
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
方法來獲取選中的日期值以及設(shè)置日期值。下面的例子比較詳細(xì)的描述了
DateChooser
組件的使用。
1.
<
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
>
這個(gè)例子通過響應(yīng)組件的
change
事件來獲取選中的日期信息,相信大家也不難看懂。
禁用某個(gè)日期段的選取
假如要禁用周一到周四的日期選擇,可以使用
1.
<
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
>
更簡單的寫法為:
<
mx
:
DateChooser
?
id
=
'date1'
?
disabledDays
=
'[1,2,3,4]'
?
/>
或者
1.
<
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();'
?
/>
個(gè)人覺得第三種方法比較通用,可以對日歷進(jìn)行初始化的設(shè)置。
注意:正確的說法應(yīng)該是禁用第
2
~
5
列的日期。
更改星期名稱
默認(rèn)的日歷星期名顯示為英文,如果要更改成中文名稱,可以用:
1.
<
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
>
請注意,如果沒有其它設(shè)置,數(shù)組的第一個(gè)元素就表示一周的第一天。當(dāng)然,最簡潔的還是
AS
的實(shí)現(xiàn)方法,而且更加靈活。
????? 1.
//設(shè)置星期顯示名稱
?
2.
date1
.
dayNames
=[
'日'
,
?
'一'
,
?
'二'
,
?
'三'
,
?
'四'
,
?
'五'
,
?
'六'
];
?
3.
//把周一作為每周的第一天
?
4.
date1
.
myDC
.
firstDayOfWeek
?
=
?
1
;
?
5.
//設(shè)置日歷頭部樣式為綠色
?
6.
date1
.
setStyle
(
'headerColor'
,
?
0x00ff00
);
?
7.
//設(shè)置字體樣式為斜體
?
8.
date1
.
setStyle
(
'fontStyle'
,
?
'italic'
);
?
9.
//設(shè)置日歷的選擇范圍2004.1.1~2004.12.23
10.?
date1
.
selectableRange
?
=
11.?
{
?
rangeStart
:
?
new
?
Date
(
2004
,
1
,
1
),
?
rangeEnd
:
?
new
?
Date
(
2004
,
12
,
23
)
?
};
DateChooser
組件的常用屬性和事件還有
02
: dayNames
//
星期的名稱顯示
03
: disabledDays
//
不可用的星期
04
: disabledRanges
//
不可用的日期范圍
05
: displayedMonth
//
當(dāng)前顯示的月份
06
: displayedYear
//
當(dāng)前顯示的年份
07
: firstDayOfWeek
//
每周的第一天
( 0
~
6 0
表示
dayNames
中的第一個(gè)元素,依次類推
)
08
: headerStyle
//
頭部樣式
09
: todayStyle
//
今天的樣式
10
: weekDayStyle
//
周末的樣式
11
: monthNames
//
月份的名稱顯示
12
: selectableRange
//
可以選擇的日期范圍
由
rangeStart
和
rangeEnd
指定
13
: selectedDate
//
選中的日期
14
: showToday
//
是否高亮顯示今天的日期
15
:
16
: change
//
選中日期的事件響應(yīng)
17
:
scroll
//
移動(dòng)的事件響應(yīng)
通過對這些屬性的設(shè)置你可以定義更強(qiáng)大的日歷組件了。
posted on 2007-01-12 14:19
???MengChuChen 閱讀(1160)
評論(1) 編輯 收藏 所屬分類:
flex2.0