Flex中通过监测change事件阻止用户取消DateChooser控件选中日期的例子

By Minidxer | July 22, 2008

接下来的例子演示了Flex中如何通过监测change事件，阻止用户取消DateChooser控件选中日期。本例中还增加了一个List控件使用户可以选择无效的日期（星期）。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.events.CalendarLayoutChangeEvent;
  10.  
  11.             private function dateChooser_change(evt:CalendarLayoutChangeEvent):void {
  12.                 /* Prevent deselecting of dates. */
  13.                 if (evt.currentTarget.selectedDate == null) {
  14.                     evt.currentTarget.selectedDate = evt.newDate;
  15.                 }
  16.             }
  17.         ]]>
  18.     </mx:Script>
  19.  
  20.     <mx:Array id="weekDayNames">
  21.         <mx:String>Sun</mx:String>
  22.         <mx:String>Mon</mx:String>
  23.         <mx:String>Tue</mx:String>
  24.         <mx:String>Wed</mx:String>
  25.         <mx:String>Thu</mx:String>
  26.         <mx:String>Fri</mx:String>
  27.         <mx:String>Sat</mx:String>
  28.     </mx:Array>
  29.  
  30.     <mx:String id="selDate">{dateChooser.selectedDate.toDateString()}</mx:String>
  31.  
  32.     <mx:HBox>
  33.         <mx:VBox>
  34.             <mx:DateChooser id="dateChooser"
  35.                     disabledDays="{disabledDaysList.selectedIndices}"
  36.                     selectedDate="{new Date()}"
  37.                     dayNames="{weekDayNames}"
  38.                     yearNavigationEnabled="true"
  39.                     change="dateChooser_change(event)" />
  40.  
  41.             <mx:Label text="Selected date: {selDate}" />
  42.         </mx:VBox>
  43.  
  44.         <mx:VBox>
  45.             <mx:Label text="Disabled days:"    />
  46.             <mx:List id="disabledDaysList"
  47.                     width="100"
  48.                     dataProvider="{weekDayNames}"
  49.                     allowMultipleSelection="true" />
  50.         </mx:VBox>
  51.     </mx:HBox>
  52.  
  53. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads