对于Flex中控件Datefield,默认是英文显示。但我们可以能过重新赋值的方式,让其显示中文。效果如图1
?
?????? 赋值的方式有两种。一种是直接写在datefield所在的那个mxml页面上。这种方式,网上到处都是。我暂时没找到有谁写了博客,采用第二种方式的。将中文资源写在ActionScript文件中,这样便于引用。第一种方式的弊端是显而易见的。
?????? 在这里,作为一名技术人员,本人希望有志者不要经常转载别人的技术文章,以获取高点击率,那是人品有问题。每当我上网查找问题答案,发现很多的博客文章一模一样。有创意吗。为了点击率,经常转载或抄袭别人的技术文章,是可耻的!
?????? 好了,言归正传!开始我们的工作。
- 在Flex Builder环境或MyEclipse环境(带有Flex插件)中,创建项目,命名为“Datefield”;注意创建项目时,Application Server Type选择“None”。这样,可以直接运行。
- 在【Navigator】面板中,选择并打开Datefield文件。单击【Design】按钮,切换到设计视图。添加相应的组件到舞台中,并配置相应的属性值。具体详情省略。添加组件后的Datefield.mxml设计视图如下:?
?
?
.将Datefield.mxml文件切换到代码视图,修改后的代码如下:
?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"? layout="absolute">
?<mx:Style>
??????? global{
?????????? fontSize:16pt;
??????? }
?? .subDateChooser {?
??? ????????? ?backgroundColor:#df7cf8;
??? ?????????? color: black;
??? ????????? headerColor:yellow;
???????? ?}
?</mx:Style>
?<mx:Script>
??<![CDATA[
???import mx.controls.Alert;
???import mx.events.CalendarLayoutChangeEvent;
?? ???import Parameter; //引用参数类
?private static const MILISECONDS:int=1000;
?????? ?private static const SECONDS:int=60;
??????? private static const MINUTES:int=60;
??????? private static const HOURS:int=24;
??????? private function update(event:CalendarLayoutChangeEvent):void{
????try{
?????//结束日期-开始日期=合计天数
?????var diff:Number=endDate.selectedDate.getTime()-startDate.selectedDate.getTime();
?????
?????var days:int= int(diff/(MILISECONDS*SECONDS*MINUTES*HOURS));
?????duration.text=days.toString();
?????this.startDate.text=dateformat.format(this.startDate.text);
?????this.endDate.text=dateformat.format(this.endDate.text);
?????var current:Date = new Date( );
????}
????catch(ex:Error){
????}
???}
??]]>
?</mx:Script>
?<mx:DateFormatter id="dateformat" formatString="YYYY-MM-DD"/>
?<mx:Canvas backgroundColor="#F0F8E3" horizontalCenter="0" verticalCenter="0" width="284" height="220">
??<mx:DateField x="111" y="50" id="startDate" change="update(event)" dateChooserStyleName="subDateChooser"???????????? earNavigationEnabled="true"??monthNames='{Parameter.MONTH_NAMES}' dayNames="{Parameter.DAY_NAMES}"? />
??????? ?<mx:Label x="19" y="52" text="起始日期"/>
???????? <mx:Label x="19" y="111" text="结束日期"/>
?????? ?<mx:DateField id="endDate" dateChooserStyleName="subDateChooser"?? yearNavigationEnabled="true"?
??????????????????????? change="update(event)" x="111" y="109">
???????????? <mx:monthNames>{Parameter.MONTH_NAMES}</mx:monthNames>
???????????? <mx:dayNames>{Parameter.DAY_NAMES}</mx:dayNames>
???????? </mx:DateField>
???????? <mx:Label x="19" y="165" text="合计天数"/>
???????? <mx:TextInput x="111" y="163" id="duration" width="93"/>
??????? ?<mx:Label x="77" y="3" text="旅行天数计算"/>
?</mx:Canvas>
</mx:Application>
4.在同一目录下,新建一个ActionScript类文件。名为Parameter。内容如下:
package
????? {
??????????????? public class Parameter
???? ????????? {
????????????????????//月份中文
???????????????public static const MONTH_NAMES:Array = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
?????????????????? //星期中文
?????????????? public static const DAY_NAMES:Array = ["七","一","二","三","四","五","六"];
?????? }
??????}
?
4.保存并运行Datefield.mxml文件。
细心的读者会发现,在Datefield.mxml文件中,我采用了两种格式赋值(见代码蓝色部分)。这两种格式都有其方便的时候。
好了,运行一下。感觉如何,很棒!