使用DateChooser 控件显示月份名称、年份名称,并显示包含当月的所有日期的网格(每列标有对应的星期日期)。用户可以选择一个日期、某个日期范围或者多个日期。此控件包含前进和后退箭头按钮,用于改变年份和月份。您可以允许用户选择多个日期,禁止选择特定日期和只限于显示某个日期范围。

DateChooser 的样式控制:

主要属性有:dayNames,headerColors,borderColor,todayColor,todayStyleName,headerStyleName,weekDayStyleName,dropShadowEnabled

 
  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.                xmlns:s="library://ns.adobe.com/flex/spark"   
  4.                xmlns:mx="library://ns.adobe.com/flex/mx"   
  5.                xmlns:con="contr.*" 
  6.                minWidth="955" minHeight="600" xmlns:views="com.runqianapp.input.views.*"> 
  7.     <fx:Declarations> 
  8.         <!-- 将非可视元素(例如服务、值对象)放在此处 --> 
  9.     </fx:Declarations> 
  10.     <fx:Style> 
  11.         @namespace s "library://ns.adobe.com/flex/spark";  
  12.         @namespace mx "library://ns.adobe.com/flex/mx";  
  13.         @namespace con "contr.*";  
  14.         @namespace views "com.runqianapp.input.views.*";  
  15.         mx|DateChooser {   
  16.             cornerRadius: 5; /* pixels */   
  17.             headerColors: #F5F7FA,#EAF0F5 ;   
  18.             borderColor: #A6C9E2;   
  19.             fontFamily: verdana;   
  20.             todayColor: #FFFFCC;   
  21.             todayStyleName: myTodayStyleName;   
  22.             headerStyleName: myHeaderStyleName;   
  23.             weekDayStyleName: myWeekDayStyleName;   
  24.             dropShadowEnabled: true;   
  25.         }   
  26.           
  27.         .myTodayStyleName{  
  28.             font:verdana;  
  29.             color:black;   
  30.         }   
  31.           
  32.         .myWeekDayStyleName {  
  33.             font:verdana;  
  34.             fontWeight: normal;  
  35.               
  36.         }   
  37.           
  38.         .myHeaderStyleName {   
  39.             color: #222222;   
  40.             fontSize: 14;   
  41.             fontWeight: normal;   
  42.         }   
  43.     </fx:Style> 
  44.     <mx:VBox> 
  45.         <mx:DateChooser id="dateChooser" dayNames="[日,一,二,三,四,五,六]" />   
  46.     <mx:TextArea /> 
  47.     </mx:VBox> 
  48.       
  49. </s:Application>