Flex元件篇：DateField

javaprogramers發表於2006-05-25
Flex元件

DateField也是一個日期選擇元件，點選會呼叫DateChooser元件，一般用於日期的選擇。
建立DateField的方式很簡單，如：

<mx:DateField id='date1' width='120' />

 

1.


可以使用dateFormatter屬性格式化日期顯示結果

 

1. <mx:Script>
 

2. <![CDATA[
 

3. function formatDate(date:Date):String
 

4. { 
 

5. return date.getUTCDate() + '/' + ( date.getUTCMonth() + 1 ) + '/' +
 

6. date.getUTCFullYear();
 

7.  }
 

8. ]]>
 

9. </mx:Script>

10.  <mx:DateField id='date1' dateFormatter='formatDate' width='100' />

 


顯示效果如圖
如果要設定日曆的格式，也需要設定DateField元件中的相關屬性，這些和DateChooser元件的設定方法相同。這個時候如果也用MXML標記來設定的話，恐怕就比較麻煩了，所以應該養成用AS指令碼來設定元件的習慣。這裡就不多說了。基本上DateField元件的使用和DateChooser差不多，掌握了DateChooser元件，DateField自然就不成問題。
另外注意知道的是DateField元件比DateChooser元件多了兩個事件：
open 點選開啟DateChooser元件的事件響應
close 使用者選擇了日期或者在DateChooser元件之外點選的事件響應
下面的例子在選擇了日期後會彈出對話方塊提示選擇的結果

 

1. <mx:Script>
 

2. <![CDATA[
 

3. function showSelectedDate(eventObj):String
 

4. { 
 

5. return eventObj.target.selectedDate.getDate() + '/' + 
 

6. ( eventObj.target.selectedDate.getMonth() + 1 ) + '/' +
 

7. eventObj.target.selectedDate.getFullYear();
 

8.  }
 

9. ]]>

 

10.  </mx:Script>

11.  <mx:DateField id='date1' close='alert(showSelectedDate(event))' width='100' />

 

相關文章