创建DateChooser组件
下面的例子创建了一个日历组件,并且选中日期为
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
>
我们还可以通过脚本的方式来设置选中日期
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
方法来获取选中的日期值以及设置日期值。下面的例子比较详细的描述了
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
>
这个例子通过响应组件的
change
事件来获取选中的日期信息,相信大家也不难看懂。
禁用某个日期段的选取
假如要禁用周一到周四的日期选择,可以使用
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();'
/>
个人觉得第三种方法比较通用,可以对日历进行初始化的设置。
注意:正确的说法应该是禁用第
2
~
5
列的日期。
更改星期名称
默认的日历星期名显示为英文,如果要更改成中文名称,可以用:
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
>
请注意,如果没有其它设置,数组的第一个元素就表示一周的第一天。当然,最简洁的还是
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
组件的常用属性和事件还有
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
//
移动的事件响应
通过对这些属性的设置你可以定义更强大的日历组件了。
posted on 2007-01-12 14:19
☜♥☞MengChuChen 阅读(1150)
评论(1) 编辑 收藏 所属分类:
flex2.0